Posizionamento relativo al genitore assoluto in CSS

Nella lezione precedente abbiamo visto che, se al genitore viene assegnato relative, allora i suoi discendenti si posizioneranno in modo assoluto rispetto ad esso. Questo è ciò che si fa più spesso quando non si vuole che l'elemento genitore esca dal flusso normale.

Può anche succedere che al genitore sia assegnato absolute. In questo caso, anche i discendenti con absolute si posizioneranno rispetto a tale genitore, e non rispetto alla finestra del browser:

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

css#parent {
  position: absolute;
  top: 100px;
  left: 200px;
  
  width: 500px;
  height: 300px;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат: