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

bookChallenge: Work with Fixed Positioning

Task

Create a website navigation bar that remains fixed at the top of the webpage for users to access at all times. Steps:

  1. Apply fixed positioning to the navigation list.
  2. Choose one property for horizontal displacement (left or right).
  3. Choose one property for vertical displacement (top or bottom).
  4. Test the functionality by clicking on different links and ensuring that the page scrolls while keeping the navigation bar visible.
index.html

index.html

index.css

index.css

copy
  1. Set the top property to 0 to keep the navigation at the top of the web page.
  2. For horizontal positioning, you can use either left: 0; to align it with the viewport's left edge or right: 0; to align it with the right edge.
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 7

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: Work with Fixed Positioning

Svep för att visa menyn

Task

Create a website navigation bar that remains fixed at the top of the webpage for users to access at all times. Steps:

  1. Apply fixed positioning to the navigation list.
  2. Choose one property for horizontal displacement (left or right).
  3. Choose one property for vertical displacement (top or bottom).
  4. Test the functionality by clicking on different links and ensuring that the page scrolls while keeping the navigation bar visible.
index.html

index.html

index.css

index.css

copy
  1. Set the top property to 0 to keep the navigation at the top of the web page.
  2. For horizontal positioning, you can use either left: 0; to align it with the viewport's left edge or right: 0; to align it with the right edge.
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 7
some-alt