Z-Index

Nel web design, il Z-index è una proprietà CSS che determina l’ordine di impilamento degli elementi quando questi si sovrappongono nello stesso spazio visivo, per la precisione lungo l’asse z, ovvero la dimensione perpendicolare allo schermo che determina la profondità (mentre gli assi x e y definiscono la posizione orizzontale e verticale, rispettivamente, come nelle coordinate cartesiane in matematica).

Gli elementi con un valore di Z-index più alto saranno visualizzati sopra gli elementi con un valore di Z-index più basso, e saranno quindi in primo piano rispetto agli altri, che resteranno in secondo piano. In tal modo, è possibile controllare quali elementi sono più prominenti, ad esempio in un menu a discesa o in una finestra modale.

Se non specificato, gli elementi hanno un valore di z-index predefinito di 0, e l’ordine di impilamento segue l’ordine del codice HTML, con gli elementi successivi sovrapposti a quelli precedenti. La proprietà z-index può essere utilizzata solo su elementi posizionati, ovvero quelli con una proprietà di posizionamento diversa da ‘static’, come ‘relative’, ‘absolute’, ‘fixed’ o ‘sticky’.

La gestione corretta di z-index è fondamentale per creare layout complessi e interfacce utente interattive, in particolare quando si lavora con menu a discesa, modali, tooltip e altri elementi che devono apparire al di sopra del contenuto normale della pagina.