position は、ボックスの配置方法を指定するプロパティです。
このプロパティで配置方法を設定しておき、top、right、bottom、left プロパティで位置の指定を行います。
.example {
position: absolute;
top: 50px;
left: 50px;
}
| position | static … （通常の位置に表示）デフォルト |
|---|---|
| relative … （通常の位置を基準とした相対的な位置指定） | |
| absolute … （親要素を基準とした絶対的な位置指定） | |
| fixed … （ウィンドウを基準とした絶対的な位置指定 + 位置の固定） |
※fixed の指定はIEでは対応していません。
■static … （通常の位置に表示）
通常の位置とは、本来配置されるはずの位置のことです。
例えば、上記のように 200px × 100px のボックスを設定しておき、そのボックスを次のように並べたとします。
それぞれのボックスは通常の位置に表示されます。これがデフォルトの状態です。
※このデフォルトの状態では、top、right、bottom、left プロパティの位置指定は無効になります。
■relative … （通常の位置を基準とした相対的な位置指定）
本来配置されるはずの位置を基準にして、表示位置を指定する方法です。
200px × 100px のボックスを設定しておき、そのボックスを次のように並べたとします。
真ん中のボックスを、通常の位置から右に 100px ずらしています。
■absolute … （親要素を基準とした絶対的な位置指定）
親要素に relative または absolute を指定している場合は、その親要素の位置を基準にします。それ以外の場合は、ウィンドウの枠を基準とした位置の指定になります。
200px × 100px のボックスを設定しておき、そのボックスを次のように並べたとします。
一番下のボックスを、ウィンドウ枠の上から 50px、左から 100px の位置に表示しています。
■fixed … （ウィンドウを基準とした絶対的な位置指定 + 位置の固定）
ウィンドウの枠を基準とした、絶対的な位置の指定になります。表示位置は固定されるので、スクロールしても表示位置が変わりません。
200px × 100px のボックスを設定しておき、そのボックスを次のように並べたとします。
一番下のボックスを、ウィンドウ枠の上から 50px、左から 100px の位置に固定表示しています。
■親ボックスの中に、2つのボックスを並べる場合
450px×200px の親ボックスの中に、150px×50px のボックスを2つ並べています。
親ボックスの中に入る2つのボックスは、それぞれ親ボックスの位置を基準にして表示位置を指定しています。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example { /* 親ボックス */
width: 450px;
height: 200px;
background-color: #85b9e9;
position: absolute;
top: 50px;
left: 100px;
}
#boxL { /* ボックス左 */
width: 150px;
height: 50px;
background-color: #ffd78c;
position: absolute;
top: 50px;
left: 50px;
}
#boxR { /* ボックス右 */
width: 150px;
height: 50px;
background-color: #bde9ba;
position: absolute;
top: 50px;
left: 250px;
}
-->
</style>
</head>
<body>
<div id="example">
<div id="boxL">ボックス左</div>
<div id="boxR">ボックス右</div>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
