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

bookUitdaging: Beheers Sticky Positioning

Taak

Ontwerp een blogindeling voor dierenartikelen, waarbij de bijbehorende dierenfoto altijd zichtbaar blijft terwijl de gebruiker het artikel leest. Wanneer de gebruiker begint te lezen over een ander dier, toon dan de volgende dierenfoto. Stappen:

  1. Pas sticky positionering toe op het element met de classnaam illustration.
  2. Geef de positie op de pagina aan waar het element sticky moet worden.
index.html

index.html

index.css

index.css

copy
  1. Om de dierillustraties aan de bovenkant van het viewport te laten plakken terwijl de gebruiker het artikel leest, de sticky positionering toepassen op het element met de classnaam illustration.
  2. De eigenschap top instellen op 0 om aan te geven dat het element aan de bovenkant van het viewport moet blijven plakken.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 9

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

bookUitdaging: Beheers Sticky Positioning

Veeg om het menu te tonen

Taak

Ontwerp een blogindeling voor dierenartikelen, waarbij de bijbehorende dierenfoto altijd zichtbaar blijft terwijl de gebruiker het artikel leest. Wanneer de gebruiker begint te lezen over een ander dier, toon dan de volgende dierenfoto. Stappen:

  1. Pas sticky positionering toe op het element met de classnaam illustration.
  2. Geef de positie op de pagina aan waar het element sticky moet worden.
index.html

index.html

index.css

index.css

copy
  1. Om de dierillustraties aan de bovenkant van het viewport te laten plakken terwijl de gebruiker het artikel leest, de sticky positionering toepassen op het element met de classnaam illustration.
  2. De eigenschap top instellen op 0 om aan te geven dat het element aan de bovenkant van het viewport moet blijven plakken.
index.html

index.html

index.css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 9
some-alt