ウェブランサー

position - 要素の配置方法を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 しない

positionプロパティは、要素の配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。positionプロパティで指定できるのは配置方法だけです。 表示位置を実際に指定するには下記のプロパティを併用します。また、要素を入れ子にする場合には重なる順序[z-index]の指定が必要になります。

上からの距離:topプロパティ
右からの距離:rightプロパティ
下からの距離:bottomプロパティ
左からの距離:leftプロパティ
重なる順序 :z-indexプロパティ

positionに与えられる値

position: static;
特に配置方法を指定しません。この値を指定した場合には[top, bottom, left, right]が適用されません。これが初期値です。
position: relative;
相対位置に配置する際の指定となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
position: absolute;
絶対位置への配置となります。divでボックスを入れ子にする際など、親要素にpositionプロパティのstatic以外の値が指定されている場合、親要素の左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
position: fixed;
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。現在サポートしているブラウザが限られていますので、要確認です。

positionの使用サンプル

CSS
.box_sample01 {
 position: relative;
 height: 300px;
 border: 1px solid #333333;
 padding: 5px;
}
.box_sample02 {
 position: absolute;
 top: 30px;
 left: 30px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #FFCCCC;
 padding: 5px;
}
.box_sample03 {
 position: absolute;
 top: 100px;
 left: 100px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #CCCCFF;
 padding: 5px;
}
XHTML
<div class="box_sample01">
box_sample01 [position: relative;]<br />

<div class="box_sample02">
box_sample02 [position: absolute;]<br />
top:30px;, left:30px;<br />
</div>

<div class="box_sample03">
box_sample03 [position: absolute;]<br />
top:100px;, left:100px;<br />
</div>

</div>
表示確認
box_sample01 [position: relative;]
box_sample02 [position: absolute;]
top:30px;, left:30px;
box_sample03 [position: absolute;]
top:100px;, left:100px;

positionに関連するCSSプロパティ

要素の表示や配置方法
alignment-adjust 要素の水平位置を揃える基準を指定する
alignment-baseline 要素の水平位置を揃える際に親要素との相対関係に基いて指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
clear 要素の回り込み(float)を解除する
clip 要素の回り込み(float)を解除する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left positionに従って要素を配置する際に、左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-style 要素からはみ出した内容の表示スタイルを指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right positionに従って要素を配置する際に、右辺からの距離を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する
zoom 要素の表示倍率(拡大・縮小)を指定する