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:

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

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

Crea un blocco quadrato con posizionamento assoluto di dimensione 400px. Al suo interno crea altri due blocchi di dimensione 50px. Posiziona il primo blocco nell'angolo in alto a destra del genitore, e il secondo blocco - nell'angolo in basso a sinistra.