Cos'è z-index e come viene utilizzato nello sviluppo web?

z-index — è una proprietà CSS che determina l'ordine di sovrapposizione (stacking) degli elementi in base alla loro posizione sull'asse Z. Gli elementi con valori più alti di z-index vengono visualizzati sopra quelli con valori più bassi.

Viene utilizzato per gestire la profondità di sovrapposizione degli elementi con posizionamento (cioè, gli elementi il cui valore di position è diverso da static): relative, absolute, fixed, sticky.

Punti chiave di utilizzo:

• Gli elementi con posizionamento statico (position: static;) non partecipano al contesto di sovrapposizione e ignorano z-index.
• Il valore di z-index si applica solo agli elementi che creano un nuovo contesto di sovrapposizione. Questo contesto si crea, ad esempio, usando position con valori diversi da static, o applicando altre regole CSS (come opacity < 1).
• All'interno di un stesso contesto di sovrapposizione, gli elementi con z-index più alto sono posizionati sopra.
• I contesti di sovrapposizione annidati si sovrappongono come un'unica unità all'interno del contesto genitore.
• Senza un'esplicita assegnazione di z-index, l'ordine di sovrapposizione è determinato dall'ordine degli elementi nel DOM.

Esempio di utilizzo:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Sopra a .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Sotto a .box1 */
}