Positionering i forhold til absolut forælder i CSS

I den forrige lektion gennemgik vi, at hvis en forælder er sat til relative, så villes dens efterkommere blive positioneret absolut i forhold til den. Dette gøres mest almindeligt, når man ikke ønsker, at det overordnede element skal falde ud af den normale flow.

Det kan også være tilfældet, at forælderen har absolute. I dette tilfælde vil efterkommere med absolute også blive positioneret i forhold til en sådan forælder, og ikke i forhold til browserens vindue:

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

Lav en kvadratisk blok med absolut positionering på 400px. Inde i den, lav yderligere to blokke på 50px. Placer den første blok i forælderens øverste højre hjørne, og den anden blok - i forælderens nederste venstre hjørne.