div ( z-index: 1; /* integer */ )La z-indexproprietà in CSS controlla l'ordine di sovrapposizione verticale degli elementi che si sovrappongono. Come in, quale appare come se fosse fisicamente più vicino a te. z-indexinfluisce solo sugli elementi che hanno un valore di posizione diverso da static(predefinito).
Gli elementi possono sovrapporsi per una serie di motivi, ad esempio, il posizionamento relativo lo ha spinto su qualcos'altro. Il margine negativo ha trascinato l'elemento su un altro. Gli elementi in posizione assoluta si sovrappongono. Tutti i tipi di motivi.
Senza alcun z-indexvalore, gli elementi si accumulano nell'ordine in cui appaiono nel DOM (quello più in basso allo stesso livello gerarchico appare in alto). Gli elementi con posizionamento non statico appariranno sempre sopra gli elementi con posizionamento statico predefinito.
Nota anche che l'annidamento gioca un ruolo importante. Se un elemento B si trova sopra l'elemento A, un elemento figlio dell'elemento A non può mai essere più alto dell'elemento B.
Si noti che la versione precedente di IE ha un po 'incasinato questo contesto. Ecco una correzione jQuery per questo.
Maggiori informazioni
- Screencast: come funziona z-index
- Documenti MDN
- Articolo completo: Comprendere lo z-index
- Valori z-index razionali
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | Lavori | Lavori | 4+ | 4+ | Lavori |