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:

html<div id="parent">
  <div id="child"></div>
</div>

css#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:

html<div id="parent">
  <div id="child"></div>
</div>

css#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:

html<div id="parent">
  <div id="child"></div>
</div>

css#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.