Позиционирование относительно абсолютного родителя в 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. Разместите первый блок в верхнем правом углу родителя, а второй блок - в нижнем левом углу.