Pozicionavimas absoliutaus tėvinio elemento atžvilgiu CSS

Ankstesnėje pamokoje išsiaiškinome, kad jei tėviniam elementui nustatome relative, tai jo palikuoniai bus absoliučiai pozicionuojami jo atžvilgiu. Taip dažniausiai elgiamasi, kai nenorima, kad tėvinis elementas iškristų iš normalios srauto.

Gali būti ir taip, kad tėviniam elementui nustatytas absolute. Šiuo atveju palikuoniai su absolute taip pat bus pozicionuojami šio tėvinio elemento atžvilgiu, o ne naršyklės lango atžvilgiu:

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

Sukurkite kvadratinį bloką su absoliučiu pozicionavimu, kurio dydis 400px. Jo viduje sukurkite dar du blokus, kurių dydis 50px. Pirmąjį bloką pastatykite viršutiniame dešiniajame tėvinio bloko kampe, o antrąjį bloką - apatiniame kairiajame kampe.