Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Fast Positionering for Klæbrige UI-Elementer | Mastering CSS-positionering
Avancerede CSS-teknikker

bookFast Positionering for Klæbrige UI-Elementer

Fast positionering gør det muligt at placere et element i forhold til visningsområdet (browserens vindue) i stedet for i forhold til dets overordnede element. Det betyder, at elementet altid forbliver på samme position på skærmen, selvom brugeren ruller siden.

position: fixed;

Det kan være nyttigt, når der oprettes webside-navigation, som altid skal være tilgængelig for brugeren, eller når det er nødvendigt at vise information permanent på skærmen. Derfor skal vi nu øve os og oprette support-chatknappen, som altid vil være i nederste højre hjørne af visningsområdet.

index.html

index.html

index.css

index.css

copy

Chat-knappen er altid tilgængelig for brugeren. Den forsvinder ikke ved rulning. Dette blev opnået udelukkende med egenskaben position: fixed;.

question mark

Hvad er adfærden for egenskaben position: fixed?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 6

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.04

bookFast Positionering for Klæbrige UI-Elementer

Stryg for at vise menuen

Fast positionering gør det muligt at placere et element i forhold til visningsområdet (browserens vindue) i stedet for i forhold til dets overordnede element. Det betyder, at elementet altid forbliver på samme position på skærmen, selvom brugeren ruller siden.

position: fixed;

Det kan være nyttigt, når der oprettes webside-navigation, som altid skal være tilgængelig for brugeren, eller når det er nødvendigt at vise information permanent på skærmen. Derfor skal vi nu øve os og oprette support-chatknappen, som altid vil være i nederste højre hjørne af visningsområdet.

index.html

index.html

index.css

index.css

copy

Chat-knappen er altid tilgængelig for brugeren. Den forsvinder ikke ved rulning. Dette blev opnået udelukkende med egenskaben position: fixed;.

question mark

Hvad er adfærden for egenskaben position: fixed?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 6
some-alt