A cosa serve la proprietà z-index in CSS?

La proprietà z-index in CSS controlla l'ordine di impilamento degli elementi posizionati lungo l'asse Z. Gli elementi con un valore z-index maggiore vengono posizionati sopra quelli con un valore inferiore.

Punti chiave:

• Si applica solo agli elementi posizionati (position: relative, absolute, fixed, sticky).
• Il valore può essere un numero (positivo, negativo o zero).
• Il valore automatico (auto) corrisponde all'ordine nel DOM.
• Valori negativi di z-index possono posizionare un elemento sotto l'elemento genitore e il suo contenuto.
• z-index crea un contesto di impilamento (stacking context). Gli elementi all'interno di uno stesso contesto sono ordinati per il loro z-index, ma l'intero contesto si comporta come un'unità rispetto ad altri contesti.

Ordine di impilamento predefinito (senza z-index):

1. Sfondo e bordi dell'elemento radice.
2. Elementi posizionati con z-index negativo.
3. Elementi di blocco nel flusso normale.
4. Elementi flottanti (float).
5. Elementi inline nel flusso normale.
6. Elementi posizionati con z-index: auto o z-index: 0.
7. Elementi posizionati con z-index positivo.

Esempio:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Sopra il blu */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Sotto il rosso */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

In questo caso, il blocco rosso (z-index: 1) sarà sopra il blocco blu (z-index: 0).