Summary  
This chapter covers the CSS position: fixed property, which positions an element relative to the viewport so that it remains in the same place even when the user scrolls.  

General domain of usage  
Web UI components (e.g., sticky navigation or support chat buttons)

**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.
```css
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.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTm9iaXMsIGlsbG8KICAgICAgbmVxdWUgZG9sb3JlIG1hZ25hbSBuaWhpbCBpbnZlbnRvcmUgZWxpZ2VuZGkgY3VtcXVlIHZvbHVwdGF0aWJ1cywgdm9sdXB0YXMKICAgICAgYXNwZXJpb3JlcyB2b2x1cHRhdHVtPyBIYXJ1bSBleHBlZGl0YSBpbGx1bSBjdW1xdWUgZnVnYSBtb2RpIG5vc3RydW0KICAgICAgZGVzZXJ1bnQgbW9sbGl0aWEsIHNpbnQgc2FlcGUgcXVhZSBxdWFlcmF0IHJlcnVtIHF1YXNpIG9kaW8gaXBzYW0gdml0YWUKICAgICAgbnVsbGEgdm9sdXB0YXMgbWludXMsIGVvcyBlbmltIHRlbmV0dXIuIEN1bXF1ZSBkb2xvcmVtcXVlIG5lY2Vzc2l0YXRpYnVzCiAgICAgIG5lcXVlIHZvbHVwdGF0dW0uCiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRWxpZ2VuZGkKICAgICAgbGFib3Jpb3NhbSBleGVyY2l0YXRpb25lbSBhZCBkZWxlY3R1cyBuZW1vIHZlcml0YXRpcywgaXBzdW0gZGVsZW5pdGkhIEFtZXQKICAgICAgbGliZXJvIHF1aWEgdGVtcG9yYSBmdWdpYXQgYW5pbWkgYmVhdGFlLCBsYWJvcnVtIGEuIEluIGVzdCByZXBlbGxlbmR1cwogICAgICB1bmRlIGRpY3RhIHN1bnQgdGVtcG9yZSBvZmZpY2lpcyBhZCBleGVyY2l0YXRpb25lbSBuZWNlc3NpdGF0aWJ1cwogICAgICBxdWlidXNkYW0gdm9sdXB0YXMgbWFnbmFtLCByZXB1ZGlhbmRhZSBpbGx1bSBhbmltaSBkb2xvcmlidXMgY29uc2VjdGV0dXIKICAgICAgcHJvdmlkZW50IG51bGxhIGNvbW1vZGkhIE1vbGVzdGlhZSBwZXJmZXJlbmRpcywgcGxhY2VhdCBmdWdhIGJlYXRhZSwgY3VtCiAgICAgIGlwc3VtIGxhYm9ydW0gbmFtIGxhYm9yZSB0ZW1wb3JlIG1hZ25hbSBpcHNhbSByZXB1ZGlhbmRhZSBkZWJpdGlzIGZ1Z2l0CiAgICAgIGF1dCBtb2xsaXRpYSBzaXQsIGRvbG9yZW1xdWUgYXBlcmlhbSBjdXBpZGl0YXRlIGltcGVkaXQgZG9sb3JlIGlsbG8uCiAgICAgIENvbW1vZGkgcmVwZWxsZW5kdXMgY29ycG9yaXMgZWFxdWUgc2ltaWxpcXVlIHZvbHVwdGFzIG9iY2FlY2F0aSwgdGVuZXR1cgogICAgICB1dCBtYWduYW0gcXVpcyBhdXRlbSwgc2FwaWVudGUgcG9zc2ltdXM/IERvbG9yZW1xdWUgcmVjdXNhbmRhZSBsYWJvcmlvc2FtCiAgICAgIHZlbCBuZXF1ZSBpc3RlIG1pbnVzIHJlcHJlaGVuZGVyaXQgbWFnbmkgbWFpb3JlcywgYWxpcXVhbSBuZXNjaXVudCBxdWk/CiAgICA8L3A+CiAgICA8cD4KICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRG9sb3JlbXF1ZSBkb2xvcgogICAgICBwcmFlc2VudGl1bSBlc3NlIGRlc2VydW50IG9mZmljaWlzIHF1YXMgYXNwZXJpb3JlcyBtYWduaSBhbmltaSByZW0gaXVzdG8KICAgICAgY29tbW9kaSBxdW8sIGluY2lkdW50IG5vc3RydW0gbmF0dXMgcG9ycm8gcmVpY2llbmRpcyBldCBhbGlxdWlkIGV2ZW5pZXQKICAgICAgb3B0aW8hIFVsbGFtLCBzdXNjaXBpdCBxdWkgcXVpcyBpcHNhbSBwZXJmZXJlbmRpcyBsYWJvcnVtIGxhdWRhbnRpdW0/CiAgICAgIEJsYW5kaXRpaXMgc29sdXRhLCBuZWNlc3NpdGF0aWJ1cyBpdGFxdWUsIGRlc2VydW50IGJlYXRhZSBzdXNjaXBpdAogICAgICBkb2xvcmVzLCBjb25zZXF1dW50dXIgZXggdm9sdXB0YXRlIHByYWVzZW50aXVtIHJlcHJlaGVuZGVyaXQgZWFydW0KICAgICAgY29ycnVwdGkgcXVhZXJhdCBjdW0gaGljISBOdWxsYSBhbWV0IGRlYml0aXMgbWluaW1hIGFjY3VzYW11cy4gTW9kaSwgaGljCiAgICAgIHF1aSwgZXggaWQgZnVnYSB2ZXJpdGF0aXMgYXQgdmVsaXQgcXVhZSBpbGxvIG51bGxhIGxhYm9yZSBwb3JybywgaXBzYSBlc3NlCiAgICAgIG5vYmlzIGFzcGVybmF0dXIuCiAgICA8L3A+CiAgICA8YnV0dG9uPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9jaGF0K2ltYWdlK2Zvcit0aGUrcnVubmFibGUrZXhhbXBsZS5wbmciCiAgICAgICAgYWx0PSJjaGF0IGljb24iCiAgICAgICAgd2lkdGg9IjU2cHgiCiAgICAgIC8+CiAgICA8L2J1dHRvbj4KICA8L2JvZHk+CjwvaHRtbD4=

YnV0dG9uIHsKICAvKiBUaGlzIGNoYXB0ZXIgZm9jdXMgKi8KICBwb3NpdGlvbjogZml4ZWQ7CiAgYm90dG9tOiAxMHB4OwogIHJpZ2h0OiAxMHB4OwoKICAvKiByZW1vdmUgZGVmYXVsdCBidXR0b24gYmVoYXZpb3IgKi8KICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICBib3JkZXI6IG5vbmU7CiAgY3Vyc29yOiBwb2ludGVyOwp9

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

Hva er oppførselen til egenskapen `position: fixed`?

Hev dine ferdigheter innen styling ved å mestre avanserte CSS-teknikker for moderne webdesign. Plasser og håndter elementer med presisjon ved hjelp av avanserte posisjoneringsstrategier. Lag jevne overganger og engasjerende animasjoner for å forbedre brukeropplevelsen. Transformer og manipuler elementer for dynamiske visuelle effekter. Bygg responsive design som tilpasser seg ulike enheter, og effektiviser arbeidsflyten med CSS-preprosessorer som Sass.

Undersøk hva deltakerne kan forvente av dette kurset i avansert HTML og CSS-styling. Hvilke forkunnskaper kreves før du starter kurset? Hvilke emner vil bli dekket?

Posisjonering og håndtering av elementer på nettsider. Lær om ulike posisjonerings-egenskaper, oppdag hvordan du bruker stablingsrekkefølge for å kontrollere synligheten til overlappende elementer, og håndter til slutt innhold som flyter utenfor.

Utforsk kraften i overganger og lær hvordan du kan forbedre brukeropplevelsen. Oppdag hvordan egenskaper kan animeres jevnt og gradvis for å skape sømløse tilstandsendringer.

Lær om animasjonsegenskapen og hvordan den kan brukes til å skape dynamiske og engasjerende design. Oppdag hvordan du kan lage komplekse animasjoner ved hjelp av nøkkelbilder og hvordan du kan kontrollere animasjonen.

Utforsk transformasjonsegenskapen, som gjør det mulig å endre utseendet og posisjonen til elementer på en nettside. Lær hvordan du kan skalere, rotere, skjevstille og flytte elementer i to og tre dimensjoner. Kombiner flere transformasjoner for å skape mer komplekse effekter.

Prinsippene og teknikkene som brukes i adaptivt og responsivt design har som mål å gjøre nettsteder og applikasjoner tilgjengelige og visuelt tiltalende på tvers av ulike enheter, skjermstørrelser og orienteringer.

Lær om forprosessorer i CSS og hvordan de kan bidra til å skrive mer effektiv og vedlikeholdbar kode. Forstå hvordan forprosessorer kan forenkle arbeidsflyten og generere renere CSS-kode.

Fast Posisjonering for Klebrige UI-Elementer

Awesome!

Fast Posisjonering for Klebrige UI-Elementer