Pozicionavimas CSS lygmenyje, atsižvelgiant į pirminį elementą

Jei elementui nustatyta relative, o jo palikuoniui - absolute, tai šis palikuonis bus pozicionuojamas atsižvelgiant į savo pirminį elementą, o ne atsižvelgiant į naršyklės langą.

Paprastai tokiu atveju pirminiam elementui nurodoma relative be poslinkių. Tokiu atveju su šiuo pirminiu elementu nieko neatsitinka, tačiau visi jo palikuoniai dabar bus pozicionuojami atsižvelgiant į jį.

Pažiūrėkime į pavyzdžius.

Pavyzdys

Pirmiausia tiesiog sukurkime pirminį bloką ir palikuonio bloką be pozicionavimo:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Pavyzdys

Dabar absoliučiai apibrėžkime žaliojo bloko poziciją. Kadangi pirminiam elementui nenurodyta relative, palikuonis bus pozicionuojamas atsižvelgiant į naršyklės langą:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Pavyzdys

Dabar nurodykime pirminiam elementui relative. Tokiu atveju palikuonis bus pozicionuojamas atsižvelgiant į savo pirminį elementą:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Praktinės užduotys

Šiose užduotyse pagrindinis blokas yra centre naudojant margin su reikšme auto, o likusieji yra pozicionuojami atsižvelgiant į jį naudojant savybę position.