Positionierung relativ zum absoluten Elternelement in CSS

In der vorherigen Lektion haben wir besprochen, dass, wenn für ein Elternelement relative gesetzt wird, sich seine Nachfahren absolut relativ zu ihm positionieren. Dies wird häufig so gemacht, wenn nicht gewünscht ist, dass das Elternelement aus dem normalen Fluss herausfällt.

Es kann auch vorkommen, dass für das Elternelement absolute gesetzt ist. In diesem Fall werden sich Nachfahren mit absolute ebenfalls relativ zu diesem Elternelement positionieren, und nicht relativ zum Browserfenster:

<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;
}

Erstellen Sie einen quadratischen Block mit absoluter Positionierung und einer Größe von 400px. Erstellen Sie inside zwei weitere Blöcke mit einer Größe von 50px. Platzieren Sie den ersten Block in der oberen rechten Ecke des Elternelements und den zweiten Block - in der unteren linken Ecke.