CSS基礎 positionプロパティ(absolute/relative/fixed/static)の使い方

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちは、kikuokaです。今回のtipsは【CSS基礎 positionプロパティ(absolute/relative/fixed/static)の使い方】に関してです。positionプロパティの基礎を簡単にまとめてみました。

positionプロパティの値の種類と意味


positionプロパティには「absolute」「relative」「fixed」「static」の4つの値があります。
「static」以外は「top」「bottom」「left」「right」のプロパティが使えるようになり、親ボックスからの上下左右の距離をとった位置指定が出来ます。

【absolute】絶対位置
親ボックス(ウィンドウ)の左上が基準位置として配置を指定


position:absolute;

【relative】相対位置
【absolute】を指定したボックスがある場合、そのボックスを基準に位置を指定
単独で使用した場合、本来の配置を基準に位置を指定(本来の配置位置は確保される。)

position:relative;

【fixed】絶対位置+固定
【absolute】同様の配置指定法+スクロールしても固定

position:fixed;

【static】初期値
top、bottom、left、rightは適用されず、初期値に配置

position:static;


absoluteを組み合わせて使う


position:absoluteを指定した要素の親要素に、positionプロパティの値が【relative/absolute/fixed】のものがあれば、そのうちの最も近い階層の親要素が基準に、
【relative/absolute/fixed】のものがなければ、body要素が絶対配置の基準になります。
絶対配置でbody要素以外を基準にしてボックスを配置したい場合は、親要素に【relative/absolute/fixed】のプロパティを設定しておく。

以上になります。

引用元:$mobile++
    CSS Lecture
    グラフィックデザイナーのためのCSSレイアウトメモ