Pozicionálás abszolút szülőhöz viszonyítva CSS-ben

Az előző leckében megvizsgáltuk, hogy ha a szülőnek relative-t adunk meg, akkor annak leszármazottai abszolút módon pozicionálódnak hozzá képest. Ezt leggyakrabban akkor alkalmazzuk, amikor nem akarjuk, hogy a szülőelem kikerüljön a normál flow-ból.

Előfordulhat az is, hogy a szülőnek absolute van megadva. Ebben az esetben a absolute-val rendelkező leszármazottak szintén egy ilyen szülőhöz képest pozicionálódnak, és nem a böngészőablakhoz viszonyítva:

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

Készítsen egy négyzet alakú blokkot abszolút pozicionálással, 400px méretben. Készítsen benne még két blokkot, 50px méretben. Helyezze el az első blokkot a szülő jobb felső sarkában, a második blokkot pedig az alsó bal sarkában.