No z-index, no party

La proprietà  CSS z-index controlla l’ordine di sovrapposizione degli elementi posizionati. Ma per funzionare c’è bisogno che gli elementi si sovrappongano. Ho visto molto codice in cui gli sviluppatori usano questa proprietà  quando gli elementi non sono sovrapposti. Questo è assolutamente inutile e non produce nessun effetto visivo.

Invece questa proprietà  entra in gioco con le sovrapposizioni, ossia quando gli elementi vengono posizionati in modo tale che l’uno è sopra l’altro. Ora, il comportamento predefinito dei browser per il posizionamento con sovrapposizione si basa sul principio secondo cui l’ultimo elemento nell’ordine del sorgente è quello che verrà  posto sopra gli altri.

Possiamo gestire quest’ordine a piacimento usando lo z-index che, ricordiamolo, accetta valori numerici. Quindi l’elemento con valore numerico maggiore verrà  visualizzato sopra l’elemento con z-index minore.

Come regola pratica, dovreste pensare al layout esattamente come ai livelli di Photoshop. Quindi avrete degli elementi sullo sfondo (z-index 0 o 1), degli elementi tra lo sfondo e il primo piano (z-index 2) e degli elementi in primo piano (z-index 3).

Ovviamente maggiore è il numero di livelli, maggiore è il numero di valori di z-index che andrete ad usare. Un’ultima riflessione: tecnicamente questa proprietà  accetta anche valori negativi, ma non vi consiglio di usarli poiché i risultati variano da browser a browser.