Poziționarea relativă la părinte în CSS

Dacă unui element i se atribuie relative, iar descendentului său - absolute, atunci acest descendent va fi poziționat relativ la părintele său, și nu relativ la fereastra browser-ului.

De obicei, în acest caz, părintelui i se atribuie relative fără deplasări. În acest caz, nimic nu se întâmplă cu acest părinte, dar toți descendenții săi se vor poziționa acum relativ la el.

Să ne uităm la exemple.

Exemplul

Pentru început, să facem un bloc-părinte și un bloc-descendent fără poziționare:

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

Exemplul

Acum să poziționăm blocul verde în mod absolut. Deoarece părintelui nu i s-a atribuit relative, descendentul se va poziționa relativ la fereastra browser-ului:

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

Exemplul

Acum să atribuim părintelui relative. În acest caz, descendentul se va poziționa relativ la părintele său:

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

Probleme practice

În următoarele probleme, blocul principal este centrat folosind margin cu valoarea auto, iar celelalte sunt poziționate relativ la el folosind proprietatea position.