Pozicioniranje glede na starša v CSS

Če je elementu določen relative, njegovemu potomcu pa absolute, se bo ta potomec pozicioniral glede na svojega starša in ne glede na okno brskalnika.

V takšnem primeru staršu običajno določimo relative brez premikov. V tem primeru se s tem staršem nič ne zgodi, vendar se bodo vsi njegovi potomci zdaj pozicionirali glede nanj.

Poglejmo si primere.

Primer

Za začetek naredimo blok-starša in blok-potomca brez pozicioniranja:

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

Primer

Zdaj absolutno pozicionirajmo zeleni blok. Ker staršu ni določen relative, se bo potomec pozicioniral glede na okno brskalnika:

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

Primer

Zdaj določimo staršu relative. V tem primeru se bo potomec pozicioniral glede na svojega starša:

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

Praktične naloge

V naslednjih nalogah je glavni blok centriran s pomočjo margin z vrednostjo auto, ostali pa so pozicionirani glede nanj s pomočjo lastnosti position.