div ( z-index: 1; /* integer */ )Den z-indexegenskab i CSS styrer lodret stakrækkefølge elementer at overlapning. Som i, hvilken der ser ud som om den er fysisk tættere på dig. z-indexpåvirker kun elementer, der har en anden positionsværdi end static(standard).
Elementer kan overlappe af forskellige årsager, for eksempel har relativ positionering skubbet det over noget andet. Negativ margin har trukket elementet over en anden. Absolut placerede elementer overlapper hinanden. Alle mulige årsager.
Uden nogen z-indexværdi stabler elementer i den rækkefølge, de vises i DOM (den laveste ned på det samme hierarkiniveau vises øverst). Elementer med ikke-statisk positionering vises altid oven på elementer med standard statisk positionering.
Bemærk også, at reden spiller en stor rolle. Hvis et element B sidder oven på element A, kan et underordnet element af element A aldrig være højere end element B.
Bemærk, at ældre version af IE får denne kontekst ting lidt skruet op. Her er en jQuery-løsning på det.
Mere information
- Screencast: Sådan fungerer z-index
- MDN Docs
- Omfattende artikel: Forståelse af z-indeks
- Rationelle z-indeksværdier
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | Arbejder | Arbejder | Arbejder | 4+ | 4+ | Arbejder |