position: absolute; 絶対的な位置を示す
position: absolute;
positionの値を absolute に指定すると、ボックスの位置を絶対位置で配置します。実際の位置は、top、right、bottom、left プロパティで指定します。
もっと詳しく position: absolute;
「position: absolute;を指定すると、ボックス要素は絶対的な位置で配置されます。自由な位置に配置してくれるので、使いこなせば便利なタグなのです。要素はすべて無視されウィンドウ全体の左上が基準位置となります。
position: absolute;
top: 50px;
left: 100px;
この場合は、ウィンドウの左上から下へ50px、左へ100pxの位置が基準となるボックスが作れます。
(ちなみに、このサイトのヘッドメニューは、この作り方です。)
親ボックスがある場合
親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。
親ボックスには position: relative; か、position: absolute;を指定します。position: staticと記述しないことで、次に記述する絶対的位置(absolute)
の基準位置を定めることができます。
サンプル − 親要素がある場合(親ボックスの左上が基準)
sample css 親要素にabsolute↓
.box {/*親ボックス*/
position: absolute;
top: 50px;
left: 100px;
width: 450px;
height: 200px;
text-align:left;
border: 1px solid #999;
}
.sample1_box{
position: absolute;
top:20px;
left:40px;
padding: 5px;
height:60px;
width: 150px;
background-color: #fcf;
}
html ↓
<html>
<body>
<div class="box">
<div class="sample1_box">sample1 box
</div>
</div>
</body>
</html>
実際の見え方 ↓
サンプル − 親要素がない場合(ウィンドウの左上が基準)
sample css ↓
.sample1{
position: absolute;
top: 50px;
left: 0px;
width: 100%;
}
.text1{
height: 25px;
color:#fff;
text-align: center;
padding: 2px;
background : url(画像のurl) repeat-x;
}
html ↓
<html>
<body>
<div class="sample1">
<p class="text1">sample1</p>
</div>
</body>
</html>
実際の見え方 ↓