CSSレイアウトを行う際にデザインによってはpositionプロパティを使わないといけない場合もあるので、今回は「absolute」「relative」「fixed」とそれぞれの使い方を解説していきたいと思います。
positionプロパティの値の種類、意味
- static
- 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されず、初期値に配置します。（個人的に使わないです）
- absolute
- 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです）
- relative
- 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となり、top、bottom、left、rightは適用されます。（個人的に単独では使わないです）
- fixed
- 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。（IE6は対応出来ていません...）
position : absolute を使った例
<body>
<p class="absolute-0">top left を0にした場合</p>
<p class="absolute-1">top 50px left 100px にした場合</p>
</body>
p {
width: 200px;
border: 1px solid #F00;
color: #F00;
position: 5px 10px;
text-align: center;
}
※上記CSSは見た目を分かりやすくする為の装飾です。
top left を0にした場合
p.absolute-0 {
position: absolute;
top: 0;
left: 0;
}
top 50px left 100px にした場合
p.absolute-1 {
position: absolute;
top: 50px;
left: 100px;
}
この用にabsoluteを単体で使った場合は、body要素。画面の左上を0 0の座標とした基点になります。
position : relative + absolute を使った例
<body>
<div id="wrapper" class="relative">
<h1>wrapper</h1>
<p class="absolute-0">top left を0にした場合</p>
<p class="absolute-1">top 50px left 100px にした場合</p>
<p class="absolute-2">top 0 left -250px にした場合</p>
</div>
</body>
body {
text-align: center;
}
div#wrapper {
width: 500px;
height: 800px;
background: #ACD;
border-right: 1px solid #069;
border-left: 1px solid #069;
margin: 0 auto;
}
p {
width: 200px;
border: 1px solid #F00;
color: #F00;
position: 5px 10px;
text-align: center;
}
.relative {
position: relative;
}
※上記CSSは見た目を分かりやすくする為の装飾です。
top left を0にした場合
p.absolute-0 {
position: absolute;
top: 0;
left: 0;
}
top 50px left 100px にした場合
p.absolute-1 {
position: absolute;
top: 50px;
left: 100px;
}
top 0 left -100px にした場合
p.absolute-1 {
position: absolute;
top: 0;
left: -250px;
}
この用にrelativeをかけた要素の中でabsoluteを使った場合は、relativeかけた要素（上記ソースで言うwrapper）の左上を0 0の座標とした基点になります。（自分がpositionを使う場合ほとんどこの方法を使います。）
position : fixed を使った例
<div id="wrapper">
<h1>wrapper</h1>
<p class="fixed-0">top left を0にした場合</p>
<p class="fixed-1">right bottom を0にした場合</p>
</div>
body {
text-align: center;
}
div#wrapper {
width: 500px;
height: 1000px;
background: #ACD;
border-right: 1px solid #069;
border-left: 1px solid #069;
margin: 0 auto;
}
p {
width: 200px;
border: 1px solid #000;
color: #000;
position: 5px 10px;
}
top left を0にした場合
p.fixed-0 {
position: fixed;
top: 0;
left: 0;
}
right bottom を0にした場合
p.fixed-1 {
position: fixed;
right: 0;
bottom: 0;
}
fixedをIE6に対応させる為のCSSソース
* html body {
background: url(null) fixed;
}
* html p.fixed-0 {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}
right bottom を0にした場合のIE6の対応は難しいそうですね＞＜
もし何かしらやり方を知っている方がいました是非コメントお願いします！
position：fixedのright , bottomをIE6に対応させるをご覧下さい。
365sienaさんはじめまして！
お力になれて良かったです＾＾HPを作成頑張って下さいね！知識が増えていったらけっこう楽しめると思います☆
2009年09月10日 10:34