CSSにおける親要素を基準とした位置指定

要素にrelativeが設定され、その子孫要素にabsoluteが設定されている場合、この子孫要素はブラウザウィンドウではなく、その親要素を基準として位置指定されます。

通常、この場合、親要素にはオフセットなしで relativeが指定されます。これにより、親要素自体には変化は起こりませんが、そのすべての子孫要素はこの親要素を基準として位置指定されるようになります。

例を見てみましょう。

例

まず、位置指定なしで親ブロックと子ブロックを作成しましょう：

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

例

次に、緑のブロックを絶対位置指定してみましょう。親要素にrelativeが指定されていないため、子孫要素はブラウザウィンドウを基準として位置指定されます：

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

例

今度は親要素にrelativeを指定します。この場合、子孫要素はその親要素を基準として位置指定されます：

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

実践問題

次の問題では、メインブロックはmarginの値として autoを使用して中央に配置され、他の要素はpositionプロパティを使用してそれを基準として位置指定されます。