CSS : positionの「absolute」「relative」「fixed」のリファレンス

CSS : positionの「absolute」「relative」「fixed」のリフォレンス

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の座標とした基点になります。

demo page

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を使う場合ほとんどこの方法を使います。)

demo page

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に対応させるをご覧下さい。

demo page

Track Back

ezorisu-web

CSSでドロップダウンメニュー

このブログを作るに当たって、いろいろと試行錯誤をした記録です。すぐ忘れてしまうので、覚書として書き留めています。今回はヘッダーのメニュー編。 D...

by ezorisu-web  

Comments

@shun_jp

@shun_jp

ものすごい分かりやすいです!

positionの疑問がすべて解けました!

忘れた時はこのページ参考にさせていただきます!
ありがとうございます!

2011年08月27日 02:28

MIYA

MIYA

365sienaさんはじめまして!

お力になれて良かったです^^HPを作成頑張って下さいね!知識が増えていったらけっこう楽しめると思います☆

2009年09月10日 10:34

365siena

365siena

こんにちは。はじめまして。
自力でHPを作成しようとしています。
position の relative と absoluteがよくわからなかったのですが、こちらの説明で解決しました。
ありがとうございました♪

2009年09月10日 02:32

cyokodog

cyokodog

こちらこそいろいろ勉強させていただきます^^
ハムさんもそうですが、ご自分の専門分野にとどまらず多方面に勉強熱心な姿勢はほんと見習いたい思います。

2008年12月07日 01:15

MIYA

MIYA

ご返答遅くなってすみませんでした。

以前からハムさんの記事、cyokodog さんの記事を拝見して出来る事は知っていたんですが、実際に自分の方で検証する時間がなく、放置の状態でした><

ハムさんの方法、cyokodog さんが作られたプラグインを活用する事でがたつきもなく、出来る事が分かりましたので、次の記事にてご紹介させて頂きと思っております^^

cyokodog さんのブログでもいろいろと勉強させて頂きますね^^

2008年12月05日 20:52

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の制約やガタつきも解消も解消できます。

2008年12月01日 16:05

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article