Attributo z-index CSS

Definizione e uso

L'attributo zIndex imposta l'ordine di sovrapposizione dell'elemento. Gli elementi con un ordine di sovrapposizione più alto si trovano sempre davanti agli elementi con un ordine di sovrapposizione più basso.

Nota:L'elemento può avere un valore di z-index negativo.

Nota:Z-index funziona solo sugli elementi posizionati (ad esempio position:absolute;)

Spiegazione

Questa proprietà imposta la posizione dell'elemento lungo l'asse z, dove l'asse z è definito come l'asse verticale che si estende fino all'area di visualizzazione. Se è un numero positivo, è più vicino all'utente, se è negativo, rappresenta una distanza più lontana dall'utente.

Vedi anche:

Esercizi CSS:Posizionamento CSS

Manuale di riferimento HTML DOM:Attributo zIndex

Esempio

Imposta il valore di z-index dell'immagine:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Prova personalmente

Sintassi CSS

z-index: auto|number|initial|inherit;

Valore dell'attributo

Valore Descrizione
auto Predefinito. L'ordine di sovrapposizione è uguale a quello dell'elemento genitore.
number Imposta l'ordine di sovrapposizione dell'elemento.
inherit Deve essere definito il valore dell'attributo z-index dall'elemento genitore.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: no
Versione: CSS2
Sintassi JavaScript: object.style.zIndex="1"

Altri esempi

Z-index
Z-index può essere utilizzato per posizionare un elemento dopo un altro.
Z-index
L'elemento nell'esempio precedente ha cambiato il valore di Z-index.

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta completamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0