z-index è una proprietà CSS che consente ai box di guadagnare la terza dimensione nel suo posizionamento. In pratica, permette di sovrapporre un box ad altri box indipendentemente dalla loro posizione nel markup della pagina. La proprietà float è un caso particolare di posizionamento. Infatti, se dichiari il box contenitore come posizionato in modo relativo, i box al suo interno puoi posizionarli in modo assoluto in relazione al box contenitore. L'effetto visivo è identico a quello che ottieni con il float, tranne il fatto che il box contenitore non può più essere influenzato dall'altezza dei box al suo interno perché questi sono "più alti" rispetto alla sua posizione sull'asse z. Nel normale flusso del documento, ogni box ha uno z-index automaticamente maggiore di quello dei box che lo precedono (solo per i box posizionati in modo relativo, assoluto e fisso). I box posizionati in modo statico (ovvero tutti quelli non flottanti e senza una proprietà position dichiarata) sono tutti sullo stesso piano. Accade quindi che se hai due box posizionati in modo assoluto, il secondo box presente nel codice è su un piano più elevato (ha z-index maggiore) di quello che lo precede. Tuttavia, attribuendo manualmente uno z-index al primo box e impostandolo con un valore più elevato di quello del secondo, ottieni che il primo box si trovi su un piano più elevato rispetto al secondo. Se i due box hanno una parte che si sovrappone, l'effetto dello z-index è visibilissimo. z-index accetta come valori numeri interi maggiori di 0 e più è elevato, più il box a cui l'hai attribuito risulterà "alto" rispetto agli altri. Considera l'asse z come l'asse cartesiano della profondità, ovvero un asse che parte dalla tua pagine e viene verso di te perpendicolarmete al piano dello schermo.