## Oppgave
Lag en navigasjonslinje for nettstedet som forblir **fiksert øverst** på nettsiden, slik at brukerne alltid har tilgang til den.
Steg:
1. Bruk `fixed` posisjonering på navigasjonslisten.
2. Velg én egenskap for horisontal forskyvning (`left` eller `right`).
3. Velg én egenskap for vertikal forskyvning (`top` eller `bottom`).
4. Test funksjonaliteten ved å klikke på ulike lenker og sørg for at siden ruller mens navigasjonslinjen forblir synlig.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0ibmF2aWdhdGlvbiI+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjaG9tZSIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+SG9tZTwvYT4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJuYXZpZ2F0aW9uLWl0ZW0iPgogICAgICAgIDxhIGhyZWY9IiNhYm91dCIgY2xhc3M9Im5hdmlnYXRpb24tbGluayI+QWJvdXQ8L2E+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0ibmF2aWdhdGlvbi1pdGVtIj4KICAgICAgICA8YSBocmVmPSIjcHJpY2UiIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlByaWNlPC9hPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9Im5hdmlnYXRpb24taXRlbSI+CiAgICAgICAgPGEgaHJlZj0iI3RlYW0iIGNsYXNzPSJuYXZpZ2F0aW9uLWxpbmsiPlRlYW08L2E+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogICAgPHNlY3Rpb24gY2xhc3M9InNlY3Rpb24iIGlkPSJob21lIj4KICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5Ib21lIHNlY3Rpb248L2gyPgogICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVGVtcG9yYQogICAgICAgIHBvc3NpbXVzIHByYWVzZW50aXVtIG9wdGlvIHBlcmZlcmVuZGlzIHRlbXBvcmlidXMgc3VzY2lwaXQgZWEgYXQgbmVtbwogICAgICAgIGRvbG9ydW0gZXNzZSBzZWQgdWxsYW0gc3VudCwgZW9zIHJhdGlvbmUgaXBzYW0gdm9sdXB0YXRpYnVzIG1pbmltYQogICAgICAgIG1heGltZSBhcGVyaWFtIGhhcnVtIGFkaXBpc2NpIG1hZ25hbS4gRWFxdWUgbmVxdWUsIGVuaW0gaXVzdG8gdmVsIHVuZGUKICAgICAgICBxdW8gaXVyZSBtYWduaSwgc2ltaWxpcXVlIHBlcmZlcmVuZGlzIGRvbG9yZW0sIGFyY2hpdGVjdG8gcGFyaWF0dXIgZXJyb3IKICAgICAgICBibGFuZGl0aWlzIG5lY2Vzc2l0YXRpYnVzLiBVdCBhbGlhcyBpbmNpZHVudCBkb2xvcmlidXMgdGVtcG9yYSBpdXN0bwogICAgICAgIGV4cGxpY2FibyBtb2xsaXRpYSBjdXBpZGl0YXRlIHZvbHVwdGF0aWJ1cyBxdWlidXNkYW0gcmVpY2llbmRpcwogICAgICAgIHZvbHVwdGF0ZSBhdCBpcHN1bSByYXRpb25lIGN1bXF1ZSBjb21tb2RpIGRlYml0aXMgZW9zIHBvc3NpbXVzLCBub3N0cnVtCiAgICAgICAgY29ycG9yaXMgbmVzY2l1bnQgbnVsbGEhCiAgICAgIDwvcD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGNsYXNzPSJzZWN0aW9uIiBpZD0iYWJvdXQiPgogICAgICA8aDIgY2xhc3M9InNlY3Rpb24tdGl0bGUiPkFib3V0IHNlY3Rpb248L2gyPgogICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQWxpcXVhbSByZXJ1bQogICAgICAgIHNpbWlsaXF1ZSBhY2N1c2FudGl1bSBwb3JybywgZGVsZWN0dXMgZG9sb3JlbXF1ZSBvZmZpY2lhIGRvbG9yZW0gYXBlcmlhbQogICAgICAgIGFzcGVyaW9yZXMgbGF1ZGFudGl1bSBwYXJpYXR1ciB0ZW1wb3JlIGFsaXF1aWQgdG90YW0gcXVvIGF0PyBRdWlidXNkYW0KICAgICAgICBuaXNpIGRpZ25pc3NpbW9zIG9mZmljaWEgZnVnYSB2b2x1cHRhdHVtIGludmVudG9yZSBkb2xvciwgb2RpbyBleCBxdWlkZW0KICAgICAgICBuYXR1cyBlc3QgaW1wZWRpdC4gUXVpZGVtIGN1bXF1ZSBwZXJmZXJlbmRpcyBpbmNpZHVudCBjdW0gcG9ycm8sCiAgICAgICAgZXhwbGljYWJvIGZhY2lsaXMgcXVhbSByZXBlbGxlbmR1cyBpdXN0byBpZCBwbGFjZWF0IGF1dCBpc3RlIGFkaXBpc2NpCiAgICAgICAgb21uaXMgdmVybyBpdGFxdWUgZGViaXRpcywgcmVydW0sIG9wdGlvIHJlY3VzYW5kYWUgbW9sZXN0aWFzIHF1aXMKICAgICAgICBtb2xlc3RpYWUuIEludmVudG9yZSB2b2x1cHRhdGVzIG51bGxhIHNlcXVpIHNhcGllbnRlIHRlbXBvcmlidXMgZmFjaWxpcwogICAgICAgIGRvbG9yZW1xdWUgbmVxdWUgY29ycnVwdGkgdGVtcG9yZSBhIHJlaWNpZW5kaXMgZXVtIHZlbGl0LCBldCBhbmltaQogICAgICAgIGV4cGxpY2FibyBuYW0gZWFxdWUgYWIgdm9sdXB0YXRlIGV2ZW5pZXQgbm9uIGFkaXBpc2NpIGZ1Z2l0IGF0LiBRdWlkZW0sCiAgICAgICAgcGxhY2VhdCBuaXNpLgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgICA8c2VjdGlvbiBjbGFzcz0ic2VjdGlvbiIgaWQ9InByaWNlIj4KICAgICAgPGgyIGNsYXNzPSJzZWN0aW9uLXRpdGxlIj5QcmljZSBzZWN0aW9uPC9oMj4KICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZlbCB0ZW1wb3JpYnVzCiAgICAgICAgcmVwcmVoZW5kZXJpdCB2b2x1cHRhdHVtIGRvbG9yaWJ1cyBpbmNpZHVudCBsYXVkYW50aXVtISBRdW9zIGlsbG8KICAgICAgICBub3N0cnVtIGFyY2hpdGVjdG8gZHVjaW11cyBleHBsaWNhYm8sIHZvbHVwdGFzIHV0IGVhcnVtIHZlcm8uCiAgICAgICAgQ29uc2VxdWF0dXIgY29ycG9yaXMgcXVvZCBleGVyY2l0YXRpb25lbSBhdXRlbSBjb25zZWN0ZXR1ciBhdHF1ZQogICAgICAgIGFkaXBpc2NpIHZlcm8sIGlzdGUgY3VtcXVlIGFtZXQgZG9sb3Jlcy4gQXV0IG1hZ25pIHJlaWNpZW5kaXMgc3VudAogICAgICAgIGRlc2VydW50IGltcGVkaXQgZHVjaW11cyBpcHN1bSBhbGlxdWlkIHVsbGFtIG9kaXQgdG90YW0gbmFtIG9tbmlzCiAgICAgICAgZG9sb3JlbXF1ZSBmdWdpdCwgb3B0aW8gc2VxdWkgcmVwdWRpYW5kYWUsIGV4cGxpY2FibyBwcmFlc2VudGl1bQogICAgICAgIHBvc3NpbXVzIGN1cGlkaXRhdGUgbmVjZXNzaXRhdGlidXMgbW9kaSBpbnZlbnRvcmUgYWNjdXNhbnRpdW0gbWFnbmFtCiAgICAgICAgbmloaWwuCiAgICAgIDwvcD4KICAgIDwvc2VjdGlvbj4KICAgIDxzZWN0aW9uIGNsYXNzPSJzZWN0aW9uIiBpZD0idGVhbSI+CiAgICAgIDxoMiBjbGFzcz0ic2VjdGlvbi10aXRsZSI+VGVhbSBzZWN0aW9uPC9oMj4KICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBOZXF1ZSBhZCwKICAgICAgICBuZXNjaXVudCB2b2x1cHRhcyBhYiBmYWNpbGlzIHNvbHV0YSBxdW9kIHJlcGVsbGF0IGlkPyBPbW5pcyBpbmNpZHVudAogICAgICAgIG9mZmljaWEgc3VzY2lwaXQgZGViaXRpcyByZXB1ZGlhbmRhZSBtb2xsaXRpYSBtYXhpbWUuIFNpbWlsaXF1ZSBtb2RpCiAgICAgICAgdm9sdXB0YXRlbSwgZG9sb3JlbXF1ZSBlaXVzIHByb3ZpZGVudCBwbGFjZWF0IHF1YWVyYXQgbm9iaXMsIHJlaWNpZW5kaXMKICAgICAgICBxdWFzIHJlcGVsbGF0IHJlcGVsbGVuZHVzIGVvcyBjdW1xdWUgb3B0aW8gY29ycnVwdGkgYWIgc2FwaWVudGUKICAgICAgICBtb2xlc3RpYXMgZXNzZSBwb3JybyBzZWQgcGFyaWF0dXIgYmxhbmRpdGlpcyBxdWFtLiBDdW0sIG9tbmlzPyBFcnJvcgogICAgICAgIHByb3ZpZGVudCBtb2xlc3RpYXMgaXN0ZSBhZD8gUXVpIHNhcGllbnRlIHRvdGFtIG9iY2FlY2F0aSBpcHN1bS4KICAgICAgPC9wPgogICAgPC9zZWN0aW9uPgogIDwvYm9keT4KPC9odG1sPg==

Lm5hdmlnYXRpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNkNjQzNDM7CiAgd2lkdGg6IDEwMCU7Cn0KCi5uYXZpZ2F0aW9uIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBwb3NpdGlvbjogX19fOwogIF9fXzogX19fOwogIF9fXzogX19fOwogIC8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKaHRtbCB7CiAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7Cn0KCi5zZWN0aW9uIHsKICBtYXJnaW46IDAgYXV0bzsKICBwYWRkaW5nOiAyMHB4IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRibHVlOwp9Cgouc2VjdGlvbjpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tYm90dG9tOiAzMHB4Owp9Cgp1bCB7CiAgcGFkZGluZy1sZWZ0OiAwOwogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKICBsaXN0LXN0eWxlOiBub25lOwp9CgoubmF2aWdhdGlvbi1pdGVtOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1yaWdodDogMzBweDsKfQoKLm5hdmlnYXRpb24tbGluayB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIGNvbG9yOiByZ2IoMjEyLCAyMDMsIDEyMCk7Cn0KCi5zZWN0aW9uLXRpdGxlIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgY29sb3I6IGRhcmtncmVlbjsKfQoKLnRleHQgewogIGZvbnQtc2l6ZTogMThweDsKICB0ZXh0LWFsaWduOiBqdXN0aWZ5Owp9

1. Angi `top`-egenskapen til `0` for å holde navigasjonen øverst på nettsiden.
2. For horisontal posisjonering kan du bruke enten `left: 0;` for å justere den mot venstre kant av visningsområdet, eller `right: 0;` for å justere den mot høyre kant.

Lm5hdmlnYXRpb24gewogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNkNjQzNDM7CiAgd2lkdGg6IDEwMCU7Cn0KCi5uYXZpZ2F0aW9uIHsKICBwb3NpdGlvbjogZml4ZWQ7CiAgdG9wOiAwOwogIGxlZnQ6IDA7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgpodG1sIHsKICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDsKfQoKLnNlY3Rpb24gewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDIwcHggMzBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGJsdWU7Cn0KCi5zZWN0aW9uOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDMwcHg7Cn0KCnVsIHsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgbWFyZ2luLXRvcDogMDsKICBtYXJnaW4tYm90dG9tOiAwOwogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCi5uYXZpZ2F0aW9uLWl0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAzMHB4Owp9CgoubmF2aWdhdGlvbi1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7CiAgY29sb3I6IHJnYigyMTIsIDIwMywgMTIwKTsKfQoKLnNlY3Rpb24tdGl0bGUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBjb2xvcjogZGFya2dyZWVuOwp9CgoudGV4dCB7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

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.

Utfordring: Arbeid med Fast Posisjonering

Oppgave

Awesome!

Utfordring: Arbeid med Fast Posisjonering

Oppgave