CSSの position プロパティの挙動について

  • CSS
  • 現在地

このサイトのレイアウト上、position を使いまくっていることもあり、今回はまとめとしてCSS の position について記述してみました。

position プロパティとその値

CSSの position は要素の配置方法を設定するプロパティで、指定できる値は以下の4種類があります。

static
初期値。position プロパティを設定していない、またはこの値を指定してある要素に top や left 等の位置を指定するプロパティを設定しても効果はありません。

初期値のため設定する必要がありませんが、印刷レイアウトを変更するために position の値を変更することがあります。
サイト内関連ページCSSによる印刷レイアウトの変更

relative
相対位置。他の要素との相対的な距離で位置が決定されます。
なので、位置が指定してあっても隣接する要素が指定した位置にある場合、その要素の領域分ずれて表示されます。

中央寄せだけなら static のままでも問題ないのですが、絶対位置(absolute)を持った子要素を包含したうえで中央寄せする場合は、この値が必要となります。
サイト内関連ページCSSによるボックスの中央寄せ 2

absolute
絶対位置。この値が指定された要素の親要素の領域の左上を起点として、指定された位置に表示される値です。

ただし、親要素の position の値が static である場合は、そのさらに親の static でない要素の左上が起点となります。

fixed
固定位置。この値を指定された要素は親要素をスクロールさせても位置が固定され、スクロールしません。
位置を指定した場合、ブラウザの表示領域の左上を起点とします。

位置を指定しなければ、親要素に従って表示されるので、ページを表示したときに表示領域外なら画面に表示されることはありません。
また top だけ指定した場合は、上からの位置の基準はブラウザの表示領域からになりますが、左右の位置は親要素の位置に従います。

なお、IE6以下ではサポートされていないので、対応したい場合は absolute で代用する必要があります。

absolute と fixed は、指定した位置に別の要素があっても重なって表示されるので、重なる要素同士に z-index で重なり順を指定する必要があります。(下の要素を隠す場合は、背景色の設定が必要です。)

test

上の解説だけだと特徴がわかりにくいので position の値を変更できるフォームを作って、テストしてみました。

このサンプルでは、赤いボックス(中央寄せしてあります。)の中に黄色(left:30px)と緑(left:35px;top:35px)のボックスを設置してあるので、重なる場合と隣接する場合でテストしてみて下さい。

なお、表示領域に position:relative を設定しているので、absolute ではみ出ることはありません。

対象とするボックス色
position の値

確認してみるとわかることですが、fixed の値を選択してもブラウザの表示領域の左上部分は、z-index:3 のヘッダーがあるため、重なっても表示されません。(このコンテンツ部分の z-index の値が 1 なので隠れてしまいます。)

また、赤いボックスの position の値を absolute に変更した場合、親要素に高さを設定していないこともあり、表示領域ごと隠れてしまいます。

これは、表示領域のボックスに position:relative を設定しているためで、static のままならボックスの枠を突き抜けて表示されます。

スポンサードリンク

inserted by FC2 system