Pozicionēšana attiecībā pret absolūto vecāku CSS

Iepriekšējā nodarbībā mēs apskatījām, ka, ja vecākam iestatīt relative, tad tā pēcteči tiks pozicionēti absolūti attiecībā pret to. Tas ir izplatītākais veids, kad nevēlas, lai vecāka elements izkristu no normālā plūsmas.

Var rasties situācija, kad vecākam ir iestatīts absolute. Šajā gadījumā pēcteči ar absolute arī tiks pozicionēti attiecībā pret šādu vecāku, nevis attiecībā pret pārlūkprogrammas logu:

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

Izveidojiet kvadrātveida bloku ar absolūtu pozicionēšanu, izmērs 400px. Tā iekšienē izveidojiet vēl divus blokus, izmērs 50px. Izvietojiet pirmo bloku vecāka augšējā labajā stūrī, un otro bloku - apakšējā kreisajā stūrī.