Pozicioniranje u odnosu na roditelja u CSS-u

Ako je elementu postavljen relative, a njegovom potomku - absolute, onda će se taj potomak pozicionirati u odnosu na svog roditelja, a ne u odnosu na prozor pregledača.

U pravilu, u tom slučaju roditelju se dodeljuje relative bez pomeraja. U ovom slučaju se sa ovim roditeljem ništa ne dešava, ali će se svi njegovi potomci sada pozicionirati u odnosu na njega.

Pogledajmo na primerima.

Primer

Za početak hajde da napravimo blok-roditelj i blok-potomak bez 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

Hajde sada da apsolutno pozicioniramo zeleni blok. Pošto roditelju nije dodeljen relative, potomak će se pozicionirati u odnosu na prozor pregledača:

<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

Dodelimo sada roditelju relative. U ovom slučaju će se potomak pozicionirati u odnosu na svog roditelja:

<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čni zadaci

U sledećim zadacima glavni blok je postavljen u centru pomoću margin sa vrednošću auto, a ostali se pozicioniraju u odnosu na njega pomoću svojstva position.