Posizionamento relativo al genitore in CSS
Se a un elemento è assegnato relative, e al suo
discendente - absolute, allora questo discendente
si posizionerà relativamente al suo
genitore, e non relativamente alla finestra del browser.
Di norma, in tal caso al genitore viene indicato relative senza offset. In questo caso non succede nulla al genitore, ma tutti i suoi discendenti ora si posizioneranno relativamente a lui.
Diamo un'occhiata agli esempi.
Esempio
Per cominciare, creiamo semplicemente un blocco genitore e un blocco discendente senza posizionamento:
<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;
}
:
Esempio
Ora posizioniamo assolutamente il blocco verde.
Poiché al genitore non è stato indicato relative,
il discendente si posizionerà relativamente
alla finestra del browser:
<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;
}
:
Esempio
Ora indichiamo relative al genitore. In
questo caso il discendente si posizionerà
relativamente al suo genitore:
<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;
}
:
Problemi pratici
Nei seguenti problemi, il blocco principale è
centrato utilizzando margin con valore
auto, mentre gli altri sono posizionati
relativamente ad esso utilizzando
la proprietà position.
