Posisionering relatief tot 'n absolute ouer in CSS

In die vorige les het ons bespreek dat, as 'n ouer die eienskap relative gekry het, dan sal sy afstammelinge absoluut geposisioneer word relatief tot hom. Dit is hoe dit meestal gedoen word wanneer hulle nie wil hê dat die ouer element uit die normale vloei moet val nie.

Dit kan ook gebeur dat die ouer die eienskap absolute het. In hierdie geval sal afstammelinge met absolute ook geposisioneer word relatief tot so 'n ouer, en nie relatief tot die leser se venster nie:

<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 'n vierkantige blok met absolute posisionering met 'n grootte van 400px. Maak nog twee blokke met 'n grootte van 50px binne-in. Plaas die eerste blok in die boonste regterhoek van die ouer, en die tweede blok - in die onderste linkerhoek.