z-index CSS

La proprietà z-index nei CSS specifica la posizione dell’elemento, il quale può essere posizionato avanti o dietro ad un altro elemento.

Questa proprietà è molto utilizzata nello sviluppo dei vari layout, soprattutto quanto occorre scrivere su di una immagine oppure posizionare un elemento contenitore davanti o dietro ad un altro.

z-index CSS valori possibili:

valori numerici: valori positivi, negativi o il valore zero.

auto: è quello di default.

inherit: valore ereditato da un elemento padre.

z-index CSS primo esempio

Facciamo un semplice esempio inserendo un’immagine e sopra un livello per il testo.

Creiamo semplicemente una classe per l’immagine e impostiamo il valore di position ad absolute, impostando il valore di z-index a-1.

Impostiamo anche un’opacità sull’immagine per permettere la lettura del testo.

Ecco dunque un semplice esempio:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio proprietà z-index</title>
    <style>
      .immagine {
        position: absolute;
        left: 0px;
        top: 0px;
        width:500px;
        opacity:0.2;
        z-index: -1;
      }
    </style>
    </head>
    <body>
    <h1>Proprietà z-index  CSS</h1>
    <img class="immagine" src="sito_div/img/time.jpg">
    <div>
      Testo sull'immagine con z-index!
    </div>
  </body>
</html>

Se proviamo il codice su un browser visualizzeremo un layout di questo tipo:

z- index

z-index CSS secondo esempio

In questo secondo esempio creiamo due box e facciamo in modo che il secondo box stia davanti al primo.

Quindi creiamo uno stile per il primo box dando una larghezza, un’altezza, un colore di sfondo e un padding di 20 pixel. Per il secondo box, impostiamo il colore di sfondo, l’altezza, la larghezza e la position relative. Ricordiamo che questo permette di seguire le impostazioni di left, top, bottom e right. Impostiamo anche il valore di z-index a 1 per permettergli di stare sopra al primo livello.

Ecco dunque il codice completo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio proprietà position</title>
    <style>
      .primo {
        width:300px;
        height:100px;
        background-color: #ccc;
        padding:20px;
      }
      .secondo {
        position: relative;
        background-color: #ffff00;
        z-index: 1;
        width:300px;
        height:100px;
        padding:20px;
        top:-80px;
        left:150px;
      }

    </style>
    </head>
    <body>
    <h1>Proprietà z-index  CSS</h1>
    <div class="primo">
       Primo box!
    </div>
    <div class="secondo">
      Secondo box!
    </div>
  </body>
</html>

Ecco dunque come si vedranno i box:

box sopra un altro

Potevamo ottenere lo stesso risultato inserendo z-index a 0 in quanto non abbiamo impostato per il primo box nessun z-index.

Se avessimo inserito questi valori per il primo box:

        position: relative;
        z-index: 0;

Allora per portare aventi il secondo box, dovevamo inserire queste proprietà:

      position: relative;
      z-index: 1;

terzo esempio

Proviamo adesso a cambiare il valore di z-index del secondo box impostandolo a -1, si avrà che il secondo livello è nascosto dal primo, come si vede nell’immagine sotto:

z-index negativo

Fate la prova con tre livelli per capire meglio il funzionamento.

Nelle prossime lezioni torneremo ancora sulla proprietà z-index dei CSS con tanti altri esempi pratici.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *