Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Challenge: Master Sticky Positioning | Mastering CSS Positioning
Advanced CSS Techniques

bookChallenge: Master Sticky Positioning

Task

Create a blog layout for animal articles, ensuring that the corresponding animal photo is always visible while the user reads the article. When the user starts reading about another animal, offer the next animal photo. Steps:

  1. Apply sticky positioning to the element with the class name illustration.
  2. Specify the position on the page where the element should become sticky.
index.html

index.html

index.css

index.css

copy
  1. To make the animal illustrations stick to the top of the viewport while the user reads the article, apply the sticky positioning to the element with the class name illustration.
  2. Set the top property to 0 to specify that the element should stick at the top of the viewport.
index.html

index.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 9

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookChallenge: Master Sticky Positioning

Svep för att visa menyn

Task

Create a blog layout for animal articles, ensuring that the corresponding animal photo is always visible while the user reads the article. When the user starts reading about another animal, offer the next animal photo. Steps:

  1. Apply sticky positioning to the element with the class name illustration.
  2. Specify the position on the page where the element should become sticky.
index.html

index.html

index.css

index.css

copy
  1. To make the animal illustrations stick to the top of the viewport while the user reads the article, apply the sticky positioning to the element with the class name illustration.
  2. Set the top property to 0 to specify that the element should stick at the top of the viewport.
index.html

index.html

index.css

index.css

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 9
some-alt