Positionering relativt till en absolut förälder i CSS

I föregående lektion gick vi igenom att, om en förälder sätts till relative, så kommer dess barn att positioneras absolut relativt till den. Detta är vanligtvis hur man gör när man inte vill att det förälder-elementet ska lämna det normala flödet.

Det kan också hända att föräldern har satt absolute. I det fallet kommer barn med absolute också att positioneras relativt till en sådan förälder, och inte relativt till webbläsarfönstret:

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

Skapa ett kvadratiskt block med absolut positionering som är 400px stort. Inuti det, skapa ytterligare två block som är 50px stora. Placera det första blocket i förälderns övre högra hörn, och det andra blocket - i förälderns nedre vänstra hörn.