⌘K

Proprietà z-index

La proprietà z-index stabilisce chi sarà in alto nel caso in cui più elementi si sovrappongano.

Sintassi

cssselettore {
  z-index: numero | auto;
}

Il numero deve essere intero, positivo o negativo. Può essere zero.

Valori

Valore Descrizione
Numero Un numero intero imposta l'ordine di sovrapposizione degli elementi: quando gli elementi si sovrappongono, quello in alto è quello con il z-index maggiore.
auto L'ordine di sovrapposizione è costruito automaticamente: sarà più in alto l'elemento che si trova più in basso nel codice HTML.

Valore predefinito: auto.

Esempio

In questo esempio i blocchi si sovrapporranno secondo l'ordine in cui compaiono nel codice HTML (z-index non è impostato e avrà il valore predefinito - auto). Il primo blocco sarà in fondo (rosso), e l'ultimo - più in alto (verde): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Esempio

Cambiamo l'ordine di sovrapposizione, impostando z-index. Al blocco rosso - 3, a quello blu - 2, a quello verde - 1. L'ordine di sovrapposizione cambierà inverso (più in alto sarà il blocco con z-index 3): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат:

BackProprietà positionNextPseudoelemento backdrop