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

前のレッスンでは、親要素にrelativeを設定すると、その子孫要素は親要素を基準として絶対位置指定されることを確認しました。これは通常、親要素を通常フローから除外したくない場合によく行われます。

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

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

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

サイズが400pxの絶対位置指定された正方形のブロックを作成してください。その内部に、サイズが50pxのさらに2つのブロックを作成してください。最初のブロックを親要素の右上隅に配置し、2番目のブロックを親要素の左下隅に配置してください。