Pozicionovanie vzhľadom na rodiča v CSS

Ak je prvku nastavené relative, a jeho potomkovi - absolute, potom sa tento potomok bude pozicionovať vzhľadom na svojho rodiča, a nie vzhľadom na okno prehliadača.

Spravidla sa v takom prípade rodičovi nastaví relative bez posunov. V tomto prípade sa s týmto rodičom nič nestane, ale všetci jeho potomkovia sa teraz budú pozicionovať vzhľadom neho.

Pozrime sa na príklady.

Príklad

Na začiatok si jednoducho vytvorme blok-rodiča a blok-potomka bez pozicionovania:

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

Príklad

Teraz absolútne pozicionujme zelený blok. Keďže rodičovi nie je nastavené relative, potomok sa bude pozicionovať vzhľadom na okno prehliadač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;
}

Príklad

Nastavme teraz rodičovi relative. V tomto prípade sa potomok bude pozicionovať vzhľadom na svojho rodič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;
}

Praktické úlohy

V nasledujúcich úlohách je hlavný blok vycentrovaný pomocou margin s hodnotou auto, a ostatné sú pozicionované vzhľadom naň pomocou vlastnosti position.