div ( z-index: 1; /* integer */ )De z-indexeigenschap in CSS bepaalt de verticale stapelvolgorde van elementen die elkaar overlappen. Zoals in, welke verschijnt alsof hij fysiek dichter bij je staat. z-indexheeft alleen invloed op elementen die een andere positiewaarde hebben dan static(de standaardwaarde).
Elementen kunnen elkaar om verschillende redenen overlappen, de relatieve positionering heeft het bijvoorbeeld over iets anders geduwd. Een negatieve marge heeft het element over een ander getrokken. Absoluut geplaatste elementen overlappen elkaar. Allerlei redenen.
Zonder enige z-indexwaarde worden de elementen gestapeld in de volgorde waarin ze verschijnen in de DOM (de laagste op hetzelfde hiërarchieniveau verschijnt bovenaan). Elementen met niet-statische positionering verschijnen altijd bovenop elementen met standaard statische positionering.
Merk ook op dat nestelen een grote rol speelt. Als een element B bovenop element A zit, kan een kindelement van element A nooit hoger zijn dan element B.
Merk op dat een oudere versie van IE dit context-spul een beetje verknoeid heeft. Hier is een jQuery-oplossing voor.
Meer informatie
- Screencast: hoe z-index werkt
- MDN Docs
- Uitgebreid artikel: z-index begrijpen
- Rationele z-indexwaarden
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | 4+ | 4+ | Werken |