Pozicioniranje glede na absolutnega starša v CSS

V prejšnji lekciji smo ugotovili, da če staršu nastavimo relative, se bodo njegovi potomci absolutno pozicionirali glede nanj. To se pogosto naredi, ko ne želijo, da bi nadrejeni element izpadel iz običajnega toka.

Lahko se zgodi tudi, da je staršu določen absolute. V tem primeru se bodo tudi potomci z absolute pozicionirali glede na takega starša in ne glede na okno brskalnika:

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

Naredite kvadratni blok z absolutnim pozicioniranjem velikosti 400px. Znotraj njega naredite še dva bloka velikosti 50px. Postavite prvi blok v zgornji desni kot starša, drugi blok pa - v spodnji levi kot.