div ( z-index: 1; /* integer */ )Den z-indexegenskap i CSS styr vertikal stapling ordning av element som överlappar varandra. Som i, vilken som verkar som om den är fysiskt närmare dig. z-indexpåverkar endast element som har ett annat positionsvärde än static(standard).
Element kan överlappa av olika orsaker, till exempel har relativ positionering knuffat över något annat. Negativ marginal har dragit elementet över en annan. Absolut placerade element överlappar varandra. Alla möjliga skäl.
Utan något z-indexvärde staplas element i den ordning de visas i DOM (den lägsta nedåt på samma hierarkinivå visas överst). Element med icke-statisk positionering visas alltid ovanpå element med standardstatisk positionering.
Observera också att häckning spelar en stor roll. Om ett element B sitter ovanpå element A kan ett underelement av element A aldrig vara högre än element B.
Observera att äldre version av IE får det här sammanhanget lite uppskruvat. Här är en jQuery-fix för det.
Mer information
- Screencast: Så fungerar z-index
- MDN-dokument
- Omfattande artikel: Förstå z-index
- Rationella z-indexvärden
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | Arbetar | Arbetar | Arbetar | 4+ | 4+ | Arbetar |