Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Uitdaging: Werken met Vaste Positionering | CSS-Positionering Beheersen
Geavanceerde CSS-Technieken

bookUitdaging: Werken met Vaste Positionering

Taak

Ontwerp een website-navigatiebalk die vast aan de bovenkant van de webpagina blijft, zodat gebruikers deze altijd kunnen bereiken. Stappen:

  1. Pas fixed positionering toe op de navigatielijst.
  2. Kies één eigenschap voor horizontale verplaatsing (left of right).
  3. Kies één eigenschap voor verticale verplaatsing (top of bottom).
  4. Test de functionaliteit door op verschillende links te klikken en controleer of de pagina scrolt terwijl de navigatiebalk zichtbaar blijft.
index.html

index.html

index.css

index.css

copy
  1. Stel de eigenschap top in op 0 om de navigatie bovenaan de webpagina te houden.
  2. Voor horizontale positionering kun je left: 0; gebruiken om deze aan de linkerzijde van het viewport uit te lijnen of right: 0; om deze aan de rechterzijde uit te lijnen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 7

Vraag AI

expand

Vraag AI

ChatGPT

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

Suggested prompts:

Can you show me an example of the CSS code for the fixed navigation bar?

What HTML structure should I use for the navigation bar?

How do I test if the navigation bar stays fixed while scrolling?

Awesome!

Completion rate improved to 2.04

bookUitdaging: Werken met Vaste Positionering

Veeg om het menu te tonen

Taak

Ontwerp een website-navigatiebalk die vast aan de bovenkant van de webpagina blijft, zodat gebruikers deze altijd kunnen bereiken. Stappen:

  1. Pas fixed positionering toe op de navigatielijst.
  2. Kies één eigenschap voor horizontale verplaatsing (left of right).
  3. Kies één eigenschap voor verticale verplaatsing (top of bottom).
  4. Test de functionaliteit door op verschillende links te klikken en controleer of de pagina scrolt terwijl de navigatiebalk zichtbaar blijft.
index.html

index.html

index.css

index.css

copy
  1. Stel de eigenschap top in op 0 om de navigatie bovenaan de webpagina te houden.
  2. Voor horizontale positionering kun je left: 0; gebruiken om deze aan de linkerzijde van het viewport uit te lijnen of right: 0; om deze aan de rechterzijde uit te lijnen.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 7
some-alt