Позиционирование относительно абсолютного родителя в 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;
}