Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

position

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

サンプルコード
div.test { position: static;}
div.test1 { position: relative;}
div.test2 { position: absolute;}
指定可能な値一覧
概要
static通常のドキュメントフローでの配置方法となります。『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティは適用されません。これが初期値です。
relative通常のドキュメントフローでの配置位置を基準とした配置を行います。この値が指定されている要素が通常のドキュメントフローで配置されるはずだった場所のスペースは確保されたまま配置変更されます。この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は通常のドキュメントフローで配置されるはずだった場所からの移動量を指定するものとなります。
absolute『position』プロパティの値が『static』以外で指定されている祖先要素が存在した場合はその直近の祖先要素、全ての祖先要素の『position』プロパティの値が『static』だった場合はウィンドウを基準とした配置を行います。この値が指定されている要素が通常のドキュメントフローで配置されるはずだった場所のスペースは確保されません。この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は基準となる包含ブロックの各辺からの距離を指定するものとなります。
fixedウィンドウを基準とした配置になります。スクロールした際もその位置は固定されたままで、この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は基準となるウィンドウの各辺からの距離を指定するものとなります。この値が指定されている要素が通常のドキュメントフローで配置されるはずだった場所のスペースは確保されません。
ブラウザでの表示結果

以下の『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』のサンプルはこちらをご覧ください。

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

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

値に『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』プロパティはこちらでも詳しく解説を行っています。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。