Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Vaste Positionering voor Kleverige UI-Elementen | CSS-Positionering Beheersen
Geavanceerde CSS-Technieken

bookVaste Positionering voor Kleverige UI-Elementen

Fixed positioning maakt het mogelijk om een element te positioneren ten opzichte van het viewport (het browservenster) in plaats van ten opzichte van het bovenliggende element. Dit betekent dat het element altijd op dezelfde positie op het scherm blijft, zelfs wanneer de gebruiker door de pagina scrolt.

position: fixed;

Dit is handig bij het maken van webpagina-navigatie die altijd beschikbaar moet zijn voor de gebruiker, of wanneer bepaalde informatie permanent op het scherm getoond moet worden. Daarom gaan we oefenen door een supportchatknop te maken die altijd rechtsonder in het viewport zichtbaar blijft.

index.html

index.html

index.css

index.css

copy

De chatknop is altijd beschikbaar voor de gebruiker. Deze verdwijnt niet bij het scrollen. Dit is uitsluitend bereikt met de eigenschap position: fixed;.

question mark

Wat is het gedrag van de eigenschap position: fixed?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 6

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

bookVaste Positionering voor Kleverige UI-Elementen

Veeg om het menu te tonen

Fixed positioning maakt het mogelijk om een element te positioneren ten opzichte van het viewport (het browservenster) in plaats van ten opzichte van het bovenliggende element. Dit betekent dat het element altijd op dezelfde positie op het scherm blijft, zelfs wanneer de gebruiker door de pagina scrolt.

position: fixed;

Dit is handig bij het maken van webpagina-navigatie die altijd beschikbaar moet zijn voor de gebruiker, of wanneer bepaalde informatie permanent op het scherm getoond moet worden. Daarom gaan we oefenen door een supportchatknop te maken die altijd rechtsonder in het viewport zichtbaar blijft.

index.html

index.html

index.css

index.css

copy

De chatknop is altijd beschikbaar voor de gebruiker. Deze verdwijnt niet bij het scrollen. Dit is uitsluitend bereikt met de eigenschap position: fixed;.

question mark

Wat is het gedrag van de eigenschap position: fixed?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 6
some-alt