position: ***;
- ブラウザ
- 特性
- position
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>
それぞれのボックスは通常の位置に配置されます。これがデフォルトの状態です。
※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 との違いが分かりやすいです。
使用例
■親ボックスの中に、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>
表示例
- サイト内検索
