Positionering ten opzichte van een absolute ouder in CSS

In de vorige les hebben we besproken dat, als je voor een ouder relative instelt, zijn afstammelingen zich absoluut zullen positioneren ten opzichte daarvan. Dit wordt meestal gedaan wanneer niet gewenst is dat het ouder-element uit de normale stroom valt.

Het kan ook zijn dat de ouder is ingesteld met absolute. In dat geval zullen afstammelingen met absolute zich ook positioneren ten opzichte van zo'n ouder, en niet ten opzichte van het browser venster:

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

Maak een vierkant blok met absolute positionering met een grootte van 400px. Maak daarbinnen nog twee blokken met een grootte van 50px. Plaats het eerste blok in de rechterbovenhoek van de ouder, en het tweede blok - in de linker onderhoek van de ouder.