CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのposition: static（静的ポジショニング）とは？基本と使い方を解説

CSSにおける静的ポジショニング（static positioning）は、すべての要素に適用されるデフォルトの配置方法です。要素は通常のドキュメントフローに従って配置され、top、bottom、left、rightといったオフセットプロパティの影響を受けません。

静的ポジショニングを明示的に指定するには、position: static;を使用します。

position: static の特徴

  • 要素はHTMLの記述順序どおりに、通常のドキュメントフローで配置されます。
  • top・bottom・left・rightプロパティを指定しても効果はありません。
  • z-indexも機能しないため、重なり順の制御には使えません。
  • 特別な理由がない限り、明示的に指定する必要はありませんが、他のposition値をリセットしたい場合などに役立ちます。

コード例

それでは、実際の使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
   position: static;
   color: white;
   background-color: orange;
   border: 2px dashed blue;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<p>これはサンプルテキストです。</p>
<p>これはサンプルテキストです。</p>
<div class="static">
position: static;
</div>
<p>これは別のサンプルテキストです。</p>
</body>
</html>

表示結果

CSSのposition: static（静的ポジショニング）とは？基本と使い方を解説

上記のコードを実行すると、オレンジ色の背景と青い破線のボーダーを持つdiv要素が、通常のドキュメントフローに従って段落の間に配置されます。position: staticが指定されているため、たとえtopやleftなどを設定しても、要素の位置はまったく変わりません。

まとめ

position: staticはCSSのデフォルト値であり、要素を通常の流れの中に配置します。位置の調整が必要な場合は、relative、absolute、fixed、stickyなどの他のposition値を検討しましょう。

  1. CSSの相対配置（position: relative）とは？基本の使い方を解説

    CSSの相対配置（position: relative）とは相対配置（relative positioning）を使用すると、要素は「本来表示されるはずの通常の位置」を基準として移動されます。この設定には、CSSの position: relative を使用します。position: relative を指定した要素には、top・right・bottom・left の各プロパティを組み合わせることで、通常の位置からのオフセット（ずれ）を自由に指定できます。なお、相対配置では要素が移動しても元の位置のスペースは保持されるため、周囲の他の要素のレイアウトには影響しないという特徴があります。サンプ

  2. CSSの静的ポジショニング（position: static）とは？基本と実例をわかりやすく解説

    CSSにおける静的ポジショニング（static positioning）とは、要素を特別な配置を行わず、通常のドキュメントフローに従って表示する配置方法です。position: static が指定された要素は、left、right、top、bottom といったCSSの配置プロパティの影響を一切受けません。これはCSSにおけるデフォルトの配置方法でもあります。 静的ポジショニングの例 CSSの静的ポジショニングの基本的な例を見てみましょう。 <!DOCTYPE html> <html> <head> <style> p {   &nb