RedLine Magazine::CSSビギナー向け 陥りがちな罠 Vol.01サンプル

中央寄せの場合・解決編

#containerにposition:relative;を指定しました。
absoluteが指定された部分の前にrelativeが指定されると、そのabsoluteが指定された部分はrelativeが指定された位置を基点とします。

このぺージでいう場合は赤い四角の左の隅っこがrelativeで指定した基準点となります。つーことで、その場所を基準に黄緑のボックスはそこから計算してtopから100px、leftから50pxの位置に配置されます。
>>もっかい最初から様子を確認する

CSSソース

body{
	background:#ffffec;
	text-align:center;
	}
#container{
	position:relative;
	width:60%;
	margin:0 auto;
	text-align:left;
	border:1px solid #900;
	}
div#sample01{
	position:absolute;
	top:100px;
	left:50px;
	width:150px;
	height:150px;
	background:#9c0;
	}

htmlソース

<div id="container">
<div id="sample01">
<p>div id="sample01"</p>
</div>
</div>

>>もっかい最初から様子を確認する

>>CSSビギナー向け 陥りがちな罠Vol.01へ戻る