Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Het Beheren van de Stapelvolgorde van Elementen | CSS-Positionering Beheersen
Geavanceerde CSS-Technieken

bookHet 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.html

index.css

index.css

copy

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 het html-bestand staan.

question mark

Wat is het doel van de eigenschap z-index?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 10

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.04

bookHet 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.html

index.css

index.css

copy

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 het html-bestand staan.

question mark

Wat is het doel van de eigenschap z-index?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 10
some-alt