position

div.test { position: static;}
div.test1 { position: relative;}
div.test2 { position: absolute;}

以下の『position』プロパティを設定している要素は『opacity: 0.7』を指定して半透明にしています。

<div style="position: static; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: static』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。</p>

<div style="position: relative; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: relative』、『top: 0』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: relative』を指定された手前の要素は位置を移動させても通常のドキュメントフローで配置されるはずだったスペースは確保されます。なのでこのp要素は位置が詰まることなくそのままの位置で表示されます。</p>

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: absolute』、『top: 0』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: absolute』を指定された手前の要素の通常のドキュメントフローで配置されるはずだったスペースは確保されません。なのでこのp要素は位置が詰まって表示されます。</p>

『position: fixed』のサンプルはこちらをご覧ください。

要素の配置方法を変更できます。

値に『static』と指定した場合は通常のドキュメントフローの配置となります。『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティは全て無効となります。これが初期値です。

値に『relative』と指定した場合は通常のドキュメントフローでの配置を基準とした位置で指定できます。この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は通常のドキュメントフローで配置されるはずだった場所からの移動量を指定するものとなります。『relative』と指定された要素が元々配置されるはずだったスペースは確保されますので続く要素は詰まることなくそのままの配置が維持されます。

<div style="position: relative; top: 100px; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: relative』、『top: 100px』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: relative』を指定された手前の要素は位置を移動させても通常のドキュメントフローで配置されるはずだったスペースは確保されます。なのでこのp要素は位置が詰まることなくそのままの位置で表示されます。</p>

値に『absolute』と指定した場合で、『position』プロパティに『static』以外の値が設定されている祖先要素が存在した場合はその直近の祖先要素を基準とした配置が行われます。全ての祖先要素の『position』プロパティが『static』だった場合はウィンドウを基準として配置されます。この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は基準となる包含ブロックの各辺からの距離を指定するものとなります。『absolute』と指定された要素が元々配置されるはずだったスペースは確保されませんので続く要素は詰まって配置されます。

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: absolute』、『top: 0』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: absolute』を指定された手前の要素の通常のドキュメントフローで配置されるはずだったスペースは確保されません。なのでこのp要素は位置が詰まって表示されます。</p>

値に『fixed』と指定した場合はウィンドウの左上を基準位置とした配置が行われます。スクロールしてもその位置は固定となり、この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は基準となるウィンドウの各辺からの距離を指定するものとなります。『fixed』と指定された要素が元々配置されるはずだったスペースは確保されませんので続く要素は詰まって配置されます。

『position: fixed』のサンプルはこちらをご覧ください。

『position』プロパティに『absolute』もしくは『fixed』が指定された子要素が存在していた場合、親要素はその子要素を自身の高さに算出できません。これは『position』プロパティに『absolute』もしくは『fixed』が指定された要素は通常のドキュメントフローから完全に切り離されたものとしてレイアウトされるためで、CSSのみでこの子要素の高さを親要素に自動算出させることはできません。自動で算出させたい場合はJavaScriptを私用すると良いでしょう。

そして、『position』プロパティに『absolute』もしくは『fixed』を指定した要素は『margin』プロパティの相殺は起こりません。こちらもご注意ください。

※『positon』プロパティはこちらでも詳しく解説を行っています。