| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {position: 値 } |
| 値 の形式 | static，relative，absolute，center，page，fixed |
| 初 期 値 | static |
| 対応ブラウザー | C2+ / e4+ / N4+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
positionプロパティ は、要素の表示位置の計算方法を指定 して相対位置や絶対位置による配置を指定します。
positionプロパティで指定するのは、計算方法（基準位置）のみです。 実際の表示位置の指定には、 top、 bottom、left、right を併用して、 基準位置からの距離を指定する必要があります。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| static | 配置方法を指定しません。この値のときには、top、bottom、left、right による指定は適用されません。（初期値） |
| relative | static を指定した場合の表示位置を基準位置とします。この基準位置からの距離による相対配置となります。 |
| absolute | 親ボックス、または、ウィンドウ全体の左上の位置を基準とした絶対位置となります。 親ボックスの positionプロパティに static以外の値が指定されている場合には、親ボックスの左上の位置が基準位置となります。 また、親ボックスの positionプロパティに staticが指定されている場合には、ウィンドウ全体の左上の位置が基準位置となります。 |
| center | 要素は containing block と呼ばれる矩形に関して，上下方向，左右方向とも中央に配置されます。（CSS3 新設） |
| page | ボックスの配置は絶対位置として計算します。 ページメディアやボックス領域の場合では，そのボックスの containing block が，配置対象の containing block になります。 それ以外では，絶対配置になります。 絶対位置の計算に際しては，そのボックスの marginの部分は，それ以外の margin には影響されず常に確保されます。 さらに，ページメディアの場合では，ボックスが表示されるのはそのボックスが配置された最初のページだけになります。 （CSS3 新設） |
| fixed | ウィンドウの表示領域内の一定位置に表示されて、スクロールしても位置が固定されたままで動きません。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
p.sample {height:60px; background-color:#00ff00;
font-weight:bold; position:relative }
span.sample1 {color:#ff0000; position:static; top:15px; left:15px }
span.sample2 {color:#ff0000; position:relative; top:15px; left:15px }
span.sample3 {color:#ff0000; position:absolute; top:15px; left:15px }
span.sample4 {color:#ff0000; position:fixed; top:15px; left:15px }
-->
</style> |
| HTML <body> ～ </body> |
<p class="sample"> position:static の例：<span class="sample1">position:staticの場合の表示位置</span> </p> <p class="sample"> position:relative の例：<span class="sample2">position:relativeの場合の表示位置</span> </p> <p class="sample"> position:absolute の例：<span class="sample3">position:absoluteの場合の表示位置</span> </p> <p class="sample"> position:fixed の例：<span class="sample4">position:fixedの場合の表示位置</span> </p> |
| ブラウザー 表示例 |
|---|
position:static の例：position:staticの場合の表示位置 position:relative の例：position:relativeの場合の表示位置 position:absolute の例：position:absoluteの場合の表示位置 position:fixed の例：position:fixedの場合の表示位置 |