ボックスの配置方法を指定する

position は、ボックスの配置方法を指定するプロパティです。

このプロパティで配置方法を設定しておき、top、right、bottom、left プロパティでボックスの配置位置を指定します。

配置方法の詳細とサンプル

以下の説明に出てくるdiv要素には、次の設定が行われているものとお考えください。

div {
width: 200px;
height: 100px;
}

• 200px×100pxのボックスを設定しています。

static … 通常の位置に配置

通常の位置とは、本来配置されるはずの位置のことです。

<div style="background-color: #85b9e9;">ボックス1</div>
<div style="background-color: #ffd78c; position: static;">ボックス2</div>
<div style="background-color: #bde9ba;">ボックス3</div>

サンプル画面へ

それぞれのボックスは通常の位置に配置されます。これがデフォルトの状態です。

• static を指定した場合は、ボックスの配置位置の指定は無効になります。

relative … 通常の位置を基準とした相対的な配置 （相対位置決め）

本来配置されるはずの位置を基準にして、配置位置を指定する方法です。

<div style="background-color: #85b9e9;">ボックス1</div>
<div style="background-color: #ffd78c; position: relative; top: 0; left:100px;">ボックス2</div>
<div style="background-color: #bde9ba;">ボックス3</div>

サンプル画面へ

ボックス2を、通常の位置から右に100pxずらしています。

absolute … ウィンドウまたは親ボックスを基準とした絶対的な配置 （絶対位置決め）

祖先要素に位置決めされた要素がある場合は、その要素の位置を基準にします。それ以外の場合は、ウィンドウの枠を基準とした配置になります。

• 位置決めされた要素とは、positionプロパティで static 以外の値が指定された要素のことです。

<div style="background-color: #85b9e9;">ボックス1</div>
<div style="background-color: #ffd78c;">ボックス2</div>
<div style="background-color: #bde9ba; position: absolute; top: 50px; left:100px;">ボックス3</div>

サンプル画面へ

ボックス3を、ウィンドウ枠の上から50px、左から100pxの位置に配置しています。

fixed … ウィンドウを基準とした絶対的な配置 + 位置の固定 （絶対位置決め）

ウィンドウの枠を基準とした配置になります。配置位置は固定されるので、スクロールしてもその位置に表示されたままになります。

• fixed の指定は、IE 6以下では対応していません。IE 7からは対応していますが、表示モードが互換モードの場合は機能しないようです。

<div style="background-color: #85b9e9;">ボックス1</div>
<div style="background-color: #ffd78c;">ボックス2</div>
<div style="background-color: #bde9ba; position: fixed; top: 50px; left:100px;">ボックス3</div>

サンプル画面へ

ボックス3を、ウィンドウ枠の上から50px、左から100pxの位置に固定配置しています。

• サンプル画面のウィンドウをスクロールさせると、absolute との違いが分かりやすいです。