div ( z-index: 1; /* integer */ )Den z-indexegenskap i CSS styrer den vertikale stablerekkefølgen av elementer som overlapper hverandre. Som i, hvilken som ser ut som om den er fysisk nærmere deg. z-indexpåvirker bare elementer som har en annen posisjonsverdi enn static(standard).
Elementer kan overlappe av forskjellige årsaker, for eksempel har relativ posisjonering dyttet den over noe annet. Negativ margin har trukket elementet over en annen. Absolutt posisjonerte elementer overlapper hverandre. Alle slags grunner.
Uten noen z-indexverdi stabler elementene i den rekkefølgen de vises i DOM (den laveste ned på samme hierarkinivå vises øverst). Elementer med ikke-statisk posisjonering vil alltid vises på toppen av elementer med standard statisk posisjonering.
Vær også oppmerksom på at hekking spiller en stor rolle. Hvis et element B sitter på toppen av element A, kan et underordnet element av element A aldri være høyere enn element B.
Vær oppmerksom på at eldre versjon av IE får denne kontekst ting litt skrudd opp. Her er en jQuery-løsning på det.
Mer informasjon
- Screencast: Hvordan fungerer z-index
- MDN Docs
- Omfattende artikkel: Forstå z-indeks
- Rasjonelle z-indeksverdier
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | Virker | Virker | Virker | 4+ | 4+ | Virker |