Z-index e Stacking Context
La proprietà z-index controlla l'ordine di sovrapposizione degli elementi posizionati.
Come funziona
.back { z-index: 1; }
.middle { z-index: 2; }
.front { z-index: 3; } /* Sopra a tutti */Requisiti
z-index funziona solo su elementi con position diverso da static:
.element {
position: relative; /* o absolute, fixed, sticky */
z-index: 10;
}Stacking context
Alcuni elementi creano un nuovo contesto di stacking:
- Elementi con position + z-index
- Elementi con opacity < 1
- Elementi con transform, filter, perspective