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

CSSのposition: static;とは？デフォルトの配置方法をわかりやすく解説

CSSのposition: static;は、要素の位置を「静的（スタティック）」に設定するプロパティ値です。実はこれが、すべての要素に初期状態で適用されているデフォルトの位置指定です。

position: static; の基本的な特徴

position: static;が指定された要素は、通常のドキュメントフローに従って配置されます。ここで重要なポイントは、次のとおりです。

  • HTMLの記述順序どおりに、上から下へ自然に配置される
  • top・bottom・left・rightプロパティを指定してもまったく効果がない
  • z-indexによる重なり順の制御も適用されない

つまり、位置をずらしたい場合や重なり順を操作したい場合は、relativeやabsoluteなど他のposition値を使う必要があります。

サンプルコード

以下のコードは、position: static;を実装したシンプルな例です。topやleftなどを指定しても静的配置の要素には反映されないため、実際にブラウザで動かして挙動を確認してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.static {
        position: static;
        border: 3px solid blue;
      }
    </style>
  </head>
  <body>
    <h1>Positioning Element</h1>
    <div class="static">
      div element with position: static;
    </div>
  </body>
</html>

表示結果

このコードを実行すると、青い枠線で囲まれたdiv要素が、ページの通常の流れに沿って表示されます。特別な位置調整は行われず、見出しの直後に続いて配置されるのが確認できます。

まとめ

position: static;は「位置指定を行わない」ことを明示する値であり、日常的に意識して書くことは少ないものの、CSSの配置モデルを理解するうえで欠かせない基礎知識です。オフセット系プロパティ（top / bottom / left / right）が効かないことを覚えておきましょう。

  1. CSSのbackground-positionプロパティで背景画像の位置を設定する方法

    background-positionプロパティとはCSSのbackground-positionプロパティは、背景画像の表示開始位置（初期位置）を、原点を基準として設定するために使用します。キーワード（top、bottom、left、right、center）、パーセンテージ、またはpxなどの長さの値を組み合わせて指定でき、複数の背景画像がある場合には、カンマで区切って各画像に個別の位置を割り当てることも可能です。構文background-positionプロパティの基本的な書式は以下のとおりです。セレクタ {    background-positi

  2. CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

    CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に