Proprietà CSS z-index
Usa la proprietà CSS z-index per specificare l'ordine di impilamento degli elementi. Scopri i valori e prova gli esempi.
La proprietà CSS z-index controlla l'ordine di impilamento degli elementi sovrapposti — quale appare in primo piano e quale rimane nascosto dietro. Il nome deriva dall'immaginario asse z: l'asse x va da sinistra a destra, l'asse y dall'alto verso il basso, e l'asse z punta verso di te uscendo dallo schermo. Un elemento con un valore z-index più alto si trova più vicino all'osservatore e copre gli elementi con un valore inferiore.
Questa pagina spiega cosa fa z-index, perché funziona solo sugli elementi posizionati, come i contesti di impilamento determinano quali valori vengono confrontati, e i motivi più comuni per cui z-index "non funziona".
Come funziona l'impilamento
Per impostazione predefinita, quando gli elementi si sovrappongono, quello che appare più avanti nel sorgente HTML viene disegnato sopra. z-index permette di sovrascrivere quell'ordine esplicitamente. Ad esempio, z-index: 10 si troverà sopra z-index: 1, indipendentemente dall'ordine nel sorgente, e valori negativi come z-index: -1 spingono un elemento dietro il suo genitore.
Ma z-index non è una classifica globale. I valori vengono confrontati solo all'interno dello stesso contesto di impilamento. Un contesto di impilamento è un livello autonomo: ogni elemento al suo interno viene impilato rispetto ai propri fratelli, e l'intero gruppo viene poi impilato come un'unità unica all'interno del contesto genitore. La radice della pagina (<html>) crea il primo contesto di impilamento, e determinate proprietà ne creano di nuovi (vedi più avanti).
La proprietà z-index non ha effetto sugli elementi static (il valore predefinito). Si applica solo agli elementi posizionati — quelli con position impostato su relative, absolute, fixed o sticky — e agli elementi figlio di flex/grid.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi posizionati. |
| Ereditato | No. |
| Animabile | Sì. |
| Versione | CSS2 |
| Sintassi DOM | object.style.zIndex = "-1"; |
Sintassi
Sintassi della proprietà CSS z-index
z-index: auto | number | initial | inherit;Esempio della proprietà z-index con valore negativo:
Esempio della proprietà CSS z-index con valore negativo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
left: 0;
top: 10px;
z-index: -1;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100" />
</body>
</html>Esempio della proprietà z-index con valore positivo:
Esempio della proprietà CSS z-index con valore numerico
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue,
#green,
#grey {
position: absolute;
width: 150px;
height: 150px;
color: #eee;
opacity: 0.95;
padding: 15px;
line-height: 100px;
text-align: center;
}
#blue {
z-index: 1;
background-color: #1c87c9;
top: 60px;
left: 50px;
line-height: 1;
}
.black {
height: 80px;
width: 160px;
background-color: #000;
line-height: 100px;
bottom: 20px;
position: absolute;
z-index: 10;
}
#green {
z-index: 2;
background-color: #8ebf42;
top: 100px;
left: 170px;
}
#grey {
background-color: #666;
top: 200px;
left: 100px;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<div class="container">
<div id="blue">
Blue
<div class="black">Black</div>
</div>
<div id="green">Green</div>
<div id="grey">Grey</div>
</div>
</body>
</html>Qui i riquadri si sovrappongono perché sono tutti posizionati in modo assoluto. Il riquadro blu (z-index: 1) si trova sotto il riquadro verde (z-index: 2), e il riquadro grigio non ha z-index quindi segue l'ordine nel sorgente. Nota che il riquadro nero (z-index: 10) è annidato all'interno del riquadro blu: il suo z-index: 10 viene confrontato solo con gli altri figli di blue, quindi non può salire sopra il riquadro verde anche se 10 > 2. Questa è la regola del contesto di impilamento in azione.
Risultato
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | Il livello di impilamento del box generato è uguale a quello del suo genitore. Questo è il valore predefinito della proprietà. | Provalo » |
| number | Il livello di impilamento del box generato specificato tramite numeri. Sono validi anche valori negativi. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Cosa crea un nuovo contesto di impilamento
Capire i contesti di impilamento è la chiave per padroneggiare z-index. Un nuovo contesto viene creato, tra gli altri, da:
- L'elemento radice
<html>. - Un elemento posizionato (
relative,absolute,fixed,sticky) con unz-indexdiverso daauto. - Un figlio di flex o grid con un
z-indexdiverso daauto. - Un elemento con
opacityinferiore a1(vedi opacity). - Un elemento con un valore di
transform,filter,perspective,clip-pathomaskdiverso danone(vedi transform). - Un elemento con
position: fixedoposition: sticky. - Un elemento con
isolation: isolate. - Un elemento con
will-changeimpostato su una proprietà che creerebbe un contesto.
Una volta che un elemento forma un contesto di impilamento, il z-index dei suoi discendenti è "intrappolato" al suo interno — non possono mai uscirne per competere con elementi esterni al genitore.
Perché il tuo z-index "non funziona"
Questi sono i colpevoli più comuni, in ordine di frequenza:
- L'elemento è
static.z-indexviene silenziosamente ignorato a meno chepositionnon siarelative,absolute,fixedosticky(o l'elemento non sia un elemento figlio di flex/grid). Imposta prima una posizione. - Un genitore forma un contesto di impilamento. Una modale con
z-index: 9999può comunque nascondersi dietro un altro elemento se il suo antenato si trova in un contesto con livello di impilamento inferiore. La soluzione è aumentare ilz-indexdell'antenato, non del discendente. - Un antenato ha
opacityotransform. Anche un apparentemente innocuoopacity: 0.99otransform: translateZ(0)(spesso aggiunto per la "accelerazione GPU") crea un contesto di impilamento e può intrappolare i figli. - Stai combattendo l'ordine nel sorgente. Senza
z-index, vincono gli elementi successivi. Riordinare l'HTML è talvolta più semplice di una guerra diz-index.
Evita enormi "numeri magici" come z-index: 999999. Rendono impossibile ragionare sull'ordine di impilamento. Mantieni una scala ridotta e documentata (ad esempio 1, 10, 100, 1000 per contenuto, dropdown, barre fisse e modali).
Esempio: isolare un contesto di impilamento
La proprietà isolation: isolate crea un nuovo contesto di impilamento senza modificare il posizionamento o l'opacità. È il modo più pulito per contenere i valori z-index di un componente:
.card {
/* z-index values inside .card now stay inside .card */
isolation: isolate;
}Proprietà correlate
- position — necessario affinché
z-indexabbia effetto. - opacity — valori inferiori a
1creano un contesto di impilamento. - transform — valori diversi da
nonecreano un contesto di impilamento.