Mentre è possibile posizionare gli elementi orizzontalmente sull’ asse x e verticalmente sull’ asse y con l’uso di proprietà specifiche come la proprietà css position, la proprietà css z-index permette di posizionare gli elementi su un asse z cambiando la profondità degli elementi e il loro ordine naturale di sovrapposizione.

Le regole da seguire per applicare il z-index ad un elemento sono 2:

• 1. Applicare il z-index con un valore numerico intero
  • Esempio: z-index: 2;
  • z-index: la proprietà css
  • 2: il valore applicato. In ordine di crescita, dalla profondità inferiore a quella superiore.
• 2. Dare una posizione assoluta o relativa a l’elemento
  • Esempio: position: relative;
  • Se non è specificato una posizione, il z-index è del tutto inutile.
  • In caso di bisogno, la position:relative; può essere applicata senza modificare il flusso naturale del layout.

La proprietà z-index alla prova

Per primo, vediamo l’ordine naturale di 2 elementi che si sovrappongono:

L’HTML e css usato:

<div style=”width:150px; height:150px; position:relative;”>
<div style=”width:100px; height:100px; background-color:#CCCC00; position:absolute;”></div>
<div style=”width:100px; height:100px; background-color:#FF9900; position:absolute; top:50px; left:50px;”></div>
</div>

Il risultato:

Naturalmente il quadrato verde si trova sotto quello arancione.

Usiamo il z-index per cambiare la profondità degli elementi:

L’HTML e css usato:

<div style=”width:150px; height:150px; position:relative;”>
<div style=”width:100px; height:100px; background-color:#CCCC00; position:absolute; z-index:2;”></div>
<div style=”width:100px; height:100px; background-color:#FF9900; position:absolute; top: 50px; left: 50px; z-index:1;”></div>
</div>

Il risultato:

Impostando un z-index superiore (z-index:2;) al quadrato verde e un z-index inferiore (z-index:1;) al quadrato arancione, modifichiamo l’ordine naturale degli elementi e il quadrato verde si ritrova sopra quello arancione.

Di seguito, un altro esempio un pò più sviluppato con il z-index applicato a links con un cambio di z-index sul stato hover.

Come possiamo vedere dal preview sopra, ho usato un’ immagine differente come sfondo ad ogni link (elemento html <a>), posizionati in modo assoluto, e con un z-index da 1 a 9.
Sullo stato hover, il valore del z-index è di 100 in modo di rendere l’elemento visibile interamente quando si passa sopra con il mouse.

Visualizza il risultato ottenuto….

Una piccola nota riguardo l’esempio di sopra, Internet Explorer non applica lo scambio di z-index sullo stato hover. Per ottenere l’effetto desiderato, serve aggiungere un bordo allo stato hover.

Questo esempio di base serve per mostrare gli effetti che si possono ottenere con la proprietà css z-index come la creazione d’un banner (un testo sopra un immagine o anche usando un filmato flash come sfondo) ,effetto sul testo come l’ombreggiatura, gallerie di immagine, menù e tanto altro…

Condividi questo articolo su