第33回　CSSのpositionに挑戦テーブルレイアウトを卒業しよう

CSSのpositionに挑戦

CSSをつかってレイアウトをする際、floatやmargin、padding等のプロパティを使いますが、その他にもpositionプロパティというのがあります。若干ややこしいので慣れが必要ですが、使いこなせればより自由度の高いレイアウトが可能になります。

positionプロパティ

positionプロパティは配置をどこにするかを定めるプロパティです。値は配置の基準点を定める次の4つがあります。基準点を定めた後、top,right,bottom,leftプロパティを使い、配置箇所を決めます。

static

初期値。positionを指定しない場合の通常通りの配置で、位置指定は無効です。

relative

相対配置。staticの際に表示される、通常配置の場所を基準として配置します。

absolute

絶対配置。positionプロパティで位置指定された親要素、または指定がない場合はブラウザのウィンドウを基準として配置します。

fixed

絶対配置＋位置固定。absoluteと同じ位置に配置されますが、位置が固定され、ページをスクロールしても常にウィンドウ内の同じ位置に配置されます。（IE6未対応）

※基準…ブラウザのウィンドウまたは親要素の左上の角。

サンプルファイルを見る

ソースコードは以下。

<body>
<div id="box1">box1-static</div>
<div id="box2">box2-relative</div>
<div id="box3">
<p>box3-absolute</p>
</div>
<div id="box4">box4-fixed</div>
<img src="logo_m-School.jpg" width="150" height="66" alt="ロゴ" />
</body>

body {
	margin: 0px;
	padding: 0px;
	height:9999px;
	background-image: url(grid.jpg);
	background-repeat: no-repeat;
}
div {
	width: 148px;
	height: 98px;
	background: #FFC;
	border: 1px solid #FC3;
}
#box1 {
	position: static;
	top: 50px; /*位置指定は無効*/
	left: 50px; /*位置指定は無効*/
}
#box2 {
	position: relative;
	top: 50px; /*通常位置基準*/
	left: 50px; /*通常位置基準*/
}
#box3 {
	position: absolute;
	top: 250px; /*ブラウザのウィンドウ基準*/
	left: 250px; /*ブラウザのウィンドウ基準*/
}
#box3 p {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 50px; /*#box3基準*/
	left: 50px; /*#box3基準*/
	border: 1px solid #FC3;
}
#box4 {
	position: fixed;
	top: 0px; /*ブラウザのウィンドウ基準 + 固定*/
	left: 200px; /*ブラウザのウィンドウ基準 + 固定*/
}
img {
	position: absolute;
	top: 434px; /*ブラウザのウィンドウ基準*/
	left: 350px; /*ブラウザのウィンドウ基準*/
}