Z-index en stacking context
Bepaal met z-index welke elementen bovenop verschijnen en begrijp stacking contexts.
Z-index en stacking context is een gratis CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Wat is z-index?
z-index bepaalt de stapelvolgorde van gepositioneerde elementen langs de Z-as (van voren naar achteren). Bij overlappende elementen worden hogere waarden boven lagere waarden weergegeven.
z-index werkt alleen op gepositioneerde elementen
z-index heeft geen effect op elementen met position: static (de standaardwaarde). Je moet relative, absolute, fixed of sticky gebruiken om z-index toe te passen.
<div class="popup">Popup (position + z-index)</div>
Standaardvolgorde van stapeling
Zonder expliciete z-index worden elementen in deze volgorde gestapeld (van achter naar voren):
- Achtergrond van het root-element
- Elementen op blokniveau (in stroomvolgorde)
- Zwevende elementen
- Inline-elementen
- Gepositioneerde elementen met z-index: auto of 0
Stapelcontext
Een stapelcontext is een laag elementen met een gemeenschappelijke z-as. Z-indexwaarden concurreren alleen binnen dezelfde stapelcontext. Een element binnen een stapelcontext kan niet boven elementen daarbuiten worden geplaatst, ongeacht de waarde van z-index.
Wat maakt een stapelcontext?
Een nieuwe stapelcontext wordt gemaakt door:
position+z-indexanders dan autoopacitykleiner dan 1- toegepaste
transform,filterofperspective will-changevoor specifieke eigenschappenisolation: isolate- Flex- of grid-kinderen met z-index
Isolatie van stapelcontexten
Gebruik isolation: isolate om bewust een stapelcontext te maken, zonder visuele neveneffecten. Dit is nuttig voor UI-componenten die hun eigen z-index-lagen moeten bevatten.
<div class="modal-wrapper">Isolated stacking context</div>
Het probleem met de z-index-schaal
Projecten hebben vaak last van "z-indexoorlogen", waarbij ontwikkelaars elkaar proberen te overtreffen door waarden te verhogen naar 9999 of 99999. Los dit op met een benoemde z-index-schaal met CSS-variabelen:
<p>Custom properties define a z-index scale used across the app.</p>
Negatieve z-index
Negatieve z-indexwaarden plaatsen elementen achter de achtergrond van het omhullende blok. Je kunt dit gebruiken voor decoratieve lagen van pseudo-elementen die achter de inhoud worden geplaatst.
<div class="card">Card with a decorative gradient layer behind it</div>
Problemen met stapeling opsporen
Wanneer een modaal venster of een tooltip achter een ander element verschijnt, ligt de oorzaak meestal bij een stapelcontext op een bovenliggend element met een lage z-index. Gebruik de 3D-weergave van DevTools of controleer de opacity, transform en filter van bovenliggende elementen.
z-index in flexbox en grid
Flex- en grid-items kunnen z-index rechtstreeks gebruiken zonder position expliciet in te stellen. De browser behandelt ze voor het stapelen alsof ze gepositioneerd zijn.
<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>
Vaste modale vensters en z-index
Modale vensters moeten directe kinderen van <body> (of van een wrapper op het hoogste niveau) zijn om stapelcontexten van bovenliggende elementen te omzeilen. Het HTML-element <dialog> regelt dit van nature in de bovenste laag van de browser.
Korte controle
Twee overlappende elementen hebben beide z-index: 100 in verschillende stapelcontexten van bovenliggende elementen. Wat bepaalt welk element bovenaan verschijnt?
Samenvatting
z-index bepaalt de stapeling van gepositioneerde elementen van voor naar achter. Stapelcontexten isoleren de concurrentie tussen z-indexwaarden. Alles wat op een bovenliggend element een stapelcontext maakt, kan de z-indexwaarden van onderliggende elementen insluiten. Gebruik isolation: isolate om expliciete grenzen te maken en CSS-variabelen voor een z-index-schaal.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Z-index en stacking context” gratis?
Ja — de volledige tekst van “Z-index en stacking context” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Z-index en stacking context”?
Bepaal met z-index welke elementen bovenop verschijnen en begrijp stacking contexts. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Z-index en stacking context”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Statische en relatieve positionering
- Absolute positionering en containing block
- Fixed en sticky positionering
- Z-index en stacking context