position: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

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

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


div.example {
position: relative;
top: 50px;
left: 50px;
}
プロパティ名 値 説明
position static 通常の位置に配置 （初期値）
relative 通常の位置を基準とした相対的な配置
absolute ウィンドウまたは親ボックスを基準とした絶対的な配置
fixed ウィンドウを基準とした絶対的な配置 + 位置の固定

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

以下の説明に出てくる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>

サンプル画面へ新規ウィンドウで表示

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

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 との違いが分かりやすいです。

使用例

親ボックスの中に、2つのボックスを横に並べた例

450px×200px の親ボックスの中に、150px×50px のボックスを横に2つ並べています。

親ボックスの中に配置される2つのボックスは、それぞれ親ボックスの位置を基準とした絶対的な配置（absolute）で指定しています。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

div.example { /* 親ボックス */
width: 450px;
height: 200px;
background-color: #85b9e9;
position: absolute;
top: 50px;
left: 100px;
}

div.box1 { /* ボックス1 */
width: 150px;
height: 50px;
background-color: #ffd78c;
position: absolute;
top: 50px;
left: 50px;
} 

div.box2 { /* ボックス2 */
width: 150px;
height: 50px;
background-color: #bde9ba;
position: absolute;
top: 50px;
left: 250px;
}

</style>

</head>
<body>

<div class="example">

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>

</div>

</body>
</html>
表示例

サンプル画面へ新規ウィンドウで表示