Pozycjonowanie względem rodzica w CSS

Jeśli elementowi nadano relative, a jego potomkowi - absolute, to ten potomek będzie pozycjonowany względem swojego rodzica, a nie względem okna przeglądarki.

Zazwyczaj w takim przypadku rodzicowi podaje się relative bez przesunięć. W tym przypadku z tym rodzicem nic się nie dzieje, ale wszyscy jego potomkowie będą teraz pozycjonowani względem niego.

Spójrzmy na przykłady.

Przykład

Na początek zróbmy po prostu blok-rodzic i blok-potomek bez pozycjonowania:

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

Przykład

Teraz ustawmy zielony blok absolutnie. Ponieważ rodzicowi nie nadano relative, potomek będzie pozycjonowany względem okna przeglądarki:

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

Przykład

Nadajmy teraz rodzicowi relative. W takim przypadku potomek będzie pozycjonowany względem swojego rodzica:

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

Zadania praktyczne

W następnych zadaniach główny blok jest wyśrodkowany za pomocą margin o wartości auto, a pozostałe są pozycjonowane względem niego za pomocą właściwości position.