Het Beheren van de Stapelvolgorde van Elementen
De eigenschap z-index
bepaalt de stapelvolgorde van gepositioneerde elementen op een webpagina. Deze eigenschap is alleen van toepassing op gepositioneerde elementen, die een positioneringswaarde van absolute
, fixed
, relative
of sticky
hebben. Omdat deze elementen uit de normale documentstroom worden gehaald, geven we met z-index
aan welk van deze gepositioneerde elementen hoger of lager moet worden weergegeven.
z-index: number_without_units
Hoe hoger de waarde van de eigenschap z-index
, hoe hoger het element op het scherm van de gebruiker wordt weergegeven.
Oefening: Er zijn vier div
-elementen met de klasse box
, elk gestileerd als een vierkant en genummerd om hun volgorde in het html
-document aan te geven. De vierkanten liggen momenteel boven op elkaar. De opdracht is om de z-index-eigenschap aan te passen met de juiste waarden zodat vierkant 3 naar voren komt en vierkant 4 naar achteren wordt geplaatst.
index.html
index.css
Opmerking
Als we dezelfde waarde voor de eigenschap
z-index
aan verschillende elementen toekennen, zal de browser de elementen weergeven in de volgorde waarin de elementen in hethtml
-bestand staan.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
Het Beheren van de Stapelvolgorde van Elementen
Veeg om het menu te tonen
De eigenschap z-index
bepaalt de stapelvolgorde van gepositioneerde elementen op een webpagina. Deze eigenschap is alleen van toepassing op gepositioneerde elementen, die een positioneringswaarde van absolute
, fixed
, relative
of sticky
hebben. Omdat deze elementen uit de normale documentstroom worden gehaald, geven we met z-index
aan welk van deze gepositioneerde elementen hoger of lager moet worden weergegeven.
z-index: number_without_units
Hoe hoger de waarde van de eigenschap z-index
, hoe hoger het element op het scherm van de gebruiker wordt weergegeven.
Oefening: Er zijn vier div
-elementen met de klasse box
, elk gestileerd als een vierkant en genummerd om hun volgorde in het html
-document aan te geven. De vierkanten liggen momenteel boven op elkaar. De opdracht is om de z-index-eigenschap aan te passen met de juiste waarden zodat vierkant 3 naar voren komt en vierkant 4 naar achteren wordt geplaatst.
index.html
index.css
Opmerking
Als we dezelfde waarde voor de eigenschap
z-index
aan verschillende elementen toekennen, zal de browser de elementen weergeven in de volgorde waarin de elementen in hethtml
-bestand staan.
Bedankt voor je feedback!