Per capire come il posizionamento e l’ordine di stack interagiscano, è bene in questo esempio spostate il position:relative;da .box2 a .box3 e/o viceversa.

In pratica, gli elementi posizionati stanno sempre sopra agli elementi non posizionati, anche senza z-index esplicito.Provare ad attivare l’opacity per l’elemento non posizionato, e valutare il sorprendente effetto.

Gli elementi floattati si dispongono fra gli elementi non posizionati e quelli posizionati

Il contenuto degli elementi successivi a quelli floattati sono influenzati dal float, i bordi e il background no.

Ulteriori dettagli e approfondimenti (con esempi non sempre chiari, per via della trasparenza…).