La proprietà z-index in CSS

La proprietà z-index è utilizzata in CSS per controllare l'ordine di sovrapposizione degli elementi che si trovano uno sopra l'altro. Ad esempio, possiamo scegliere di posizionare l'immagine sotto e il testo sopra:

Questo testo ha un z-index:1 e si trova sopra l'immagine

Come funziona z-index

Puoi pensare ad una pagina web come ad una pila di elementi, uno sopra l'altro. Per semplificare, possiamo dire che l'elemento più in basso è lo sfondo della pagina. Poi ci possono essere le sezioni, poi i singoli blocchi, in cui a loro volta è presente il testo.

La proprietà z-index specifica cosa viene prima e cosa dopo quando due o più elementi sono uno sopra l'altro. Per questo motivo, z-index funziona soltanto quando position (che abbiamo visto nella lezione precedente) è diverso da static (quindi deve essere relative, absolute, fixed o sticky).

Senza alcun valore di z-index, gli elementi si posizionano nell'ordine in cui appaiono nel codice HTML (allo stesso livello di gerarchia, l'elemento più in basso appare in alto). Ad esempio, in questo caso apparirà prima il testo, perché è l'ultimo degli elementi HTML:

<div class="relative">
  <img src="tulipano.jpg">
  <p>Un testo di esempio</p>
</div>

<style>
div.relative {
  position: relative;
  width: 100%;
  height: 200px;
}
img, p {
  position: absolute;
  top: 0;
}
</style>

Utilizzare z-index

La proprietà z-index accetta qualsiasi valore numerico, sia positivo che negativo. Se non inserito, il valore predefinito è 0. Normalmente, un elemento con z-index maggiore sarà più in altro di un con z-index minore. Ad esempio:

Elemento 1 con z-index:1

Elemento 2 con z-index:3

Elemento 3 con z-index:2

.elemento1 {
  position: relative;
  z-index: 1;
}
.elemento2 {
  position: absolute;
  z-index: 3;
}
.elemento3 {
  position: absolute;
  z-index: 2;
}

Inoltre, è importante sapere che se un elemento 2 si trova sopra ad un elemento 1 nell'HTML, un elemento figlio (elemento 3) dell'elemento 1 non può mai essere posizionato sopra all'elemento 2.

Elemento 1

Elemento 2 non figlio con z-index:2

Elemento 3 figlio con z-index:100

<div class="elemento1">
  <div class="elemento3"></div> <!-- FIGLIO -->
</div>

<div class="elemento2"></div>

Esempi utili di z-index

La proprietà z-index è utilizzata spesso, ad esempio, per posizionare un menu con position:fixed sempre sopra tutti gli altri elementi.

<html>
<head>
  <style>
    body {
      margin: 0;
    }
    .menu {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #333;
      color: white;
      padding: 10px 0;
      z-index: 1000; /* Sarà sempre sopra tutti gli altri elementi */
    }
    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    }
    .menu li {
      margin: 0 15px;
    }
    .menu a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }
    .menu a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <nav class="menu">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">Chi Siamo</a></li>
      <li><a href="#services">Servizi</a></li>
      <li><a href="#contact">Contatti</a></li>
    </ul>
  </nav>
</body>
</html>

Nell'esempio, abbiamo usato anche display:flex, che vedremo nella lezione del Flexbox.

Prova!Completa gli spazi vuoti con il testo appropriato.

/* Posiziona <img> sotto <p> */
img {
position: absolute;
left:0;
: 0;
}
p {
position: absolute;
left:0;
: 1;
}