Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Fast Posisjonering for Klebrige UI-Elementer | Mastering CSS-posisjonering
Avanserte CSS-teknikker

bookFast Posisjonering for Klebrige UI-Elementer

Fixed posisjonering gjør det mulig å plassere et element i forhold til visningsområdet (nettleservinduet) i stedet for i forhold til dets overordnede element. Dette betyr at elementet alltid vil forbli på samme sted på skjermen, selv om brukeren ruller siden.

position: fixed;

Dette kan være nyttig når man lager navigasjon på nettsider som alltid skal være tilgjengelig for brukeren, eller når det er behov for å vise informasjon permanent på skjermen. Derfor skal vi øve på dette ved å lage en støttechat-knapp som alltid vises nederst til høyre i visningsområdet.

index.html

index.html

index.css

index.css

copy

Chat-knappen er alltid tilgjengelig for brukeren. Den forsvinner ikke ved rulling. Dette ble oppnådd kun med egenskapen position: fixed;.

question mark

Hva er oppførselen til egenskapen position: fixed?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you show me how to create a fixed chat button in HTML and CSS?

What other properties can I use with `position: fixed;` to control the button's placement?

Can you explain the difference between `position: fixed;` and `position: absolute;`?

Awesome!

Completion rate improved to 2.04

bookFast Posisjonering for Klebrige UI-Elementer

Sveip for å vise menyen

Fixed posisjonering gjør det mulig å plassere et element i forhold til visningsområdet (nettleservinduet) i stedet for i forhold til dets overordnede element. Dette betyr at elementet alltid vil forbli på samme sted på skjermen, selv om brukeren ruller siden.

position: fixed;

Dette kan være nyttig når man lager navigasjon på nettsider som alltid skal være tilgjengelig for brukeren, eller når det er behov for å vise informasjon permanent på skjermen. Derfor skal vi øve på dette ved å lage en støttechat-knapp som alltid vises nederst til høyre i visningsområdet.

index.html

index.html

index.css

index.css

copy

Chat-knappen er alltid tilgjengelig for brukeren. Den forsvinner ikke ved rulling. Dette ble oppnådd kun med egenskapen position: fixed;.

question mark

Hva er oppførselen til egenskapen position: fixed?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 6
some-alt