CSS : positionの「absolute」「relative」「fixed」のリファレンス
- Category ：
- CSS リファレンス
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に対応させるをご覧下さい。
Comments
ものすごい分かりやすいです！
positionの疑問がすべて解けました！
忘れた時はこのページ参考にさせていただきます！
ありがとうございます！
365sienaさんはじめまして！
お力になれて良かったです＾＾HPを作成頑張って下さいね！知識が増えていったらけっこう楽しめると思います☆
こんにちは。はじめまして。
自力でHPを作成しようとしています。
position の relative と absoluteがよくわからなかったのですが、こちらの説明で解決しました。
ありがとうございました♪
こちらこそいろいろ勉強させていただきます^^
ハムさんもそうですが、ご自分の専門分野にとどまらず多方面に勉強熱心な姿勢はほんと見習いたい思います。
ご返答遅くなってすみませんでした。
以前からハムさんの記事、cyokodog さんの記事を拝見して出来る事は知っていたんですが、実際に自分の方で検証する時間がなく、放置の状態でした＞＜
ハムさんの方法、cyokodog さんが作られたプラグインを活用する事でがたつきもなく、出来る事が分かりましたので、次の記事にてご紹介させて頂きと思っております＾＾
cyokodog さんのブログでもいろいろと勉強させて頂きますね＾＾
＞right bottom を0にした場合のIE6の対応は難しいそうですね＞＜
＞もし何かしらやり方を知っている方がいました是非コメントお願いします！
既にご存知かもしれませんが、HAM MEDIA さんのところで紹介されてる方法ですと CSSオンリーで実現できます。（body要素のheight,margin指定がネックですが）
http://h2ham.up.seesaa.net/html/position_fixed_ie6.html
http://h2ham.seesaa.net/article/109909802.html
あと、jQueryを使用してもできます。（ガタつきがネックです）
http://cyokodog.web.fc2.com/cyokolab/example/fixed_position_ex0206.html
http://d.hatena.ne.jp/cyokodog/20081201/PositionFixed02
あと、HAM MEDIAさん方式を応用してjQueryで擬似フレームを使う方式だと、heightやmarginの制約やガタつきも解消も解消できます。