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.