Summary  
This chapter covers CSS relative positioning, demonstrating how to visually offset an element from its original location using top, bottom, left, and right properties without affecting the layout of surrounding elements.

General domain of usage  
Web development

**Relativ posisjonering** gjør det mulig å plassere et element visuelt i forhold til dets opprinnelige posisjon. Samtidig vil ikke naboelementene ta elementets plass.
```css
position: relative;
```

Vi kan bruke egenskapene `top`, `left`, `bottom` og `right` for å angi den visuelle forskyvningen av et element i forhold til dets opprinnelige posisjon. Verdiene kan være både positive og negative i ulike enheter (`px`, `%`, osv.). La oss kjøre følgende eksempel for å se hvilken effekt vi kan oppnå:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPgogICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZvbHVwdGF0ZW0gZW9zCiAgICAgICAgZXQgbWF4aW1lIG9mZmljaWlzLCBtb2xlc3RpYWUgYXV0ZW0gZWEgY29ycG9yaXMgdW5kZSBxdWlidXNkYW0gbmloaWwKICAgICAgICBpcHNhbSBmYWNlcmUgY29ycnVwdGksIGludmVudG9yZSB2b2x1cHRhdGUgY29uc2VxdWF0dXIgbGFib3Jpb3NhbSBvcHRpbwogICAgICAgIG1hZ25hbSBvZGlvLgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iY2FyZCI+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gVm9sdXB0YXRlbSBlb3MKICAgICAgICBldCBtYXhpbWUgb2ZmaWNpaXMsIG1vbGVzdGlhZSBhdXRlbSBlYSBjb3Jwb3JpcyB1bmRlIHF1aWJ1c2RhbSBuaWhpbAogICAgICAgIGlwc2FtIGZhY2VyZSBjb3JydXB0aSwgaW52ZW50b3JlIHZvbHVwdGF0ZSBjb25zZXF1YXR1ciBsYWJvcmlvc2FtIG9wdGlvCiAgICAgICAgbWFnbmFtIG9kaW8uCiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJjYXJkIj4KICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBWb2x1cHRhdGVtIGVvcwogICAgICAgIGV0IG1heGltZSBvZmZpY2lpcywgbW9sZXN0aWFlIGF1dGVtIGVhIGNvcnBvcmlzIHVuZGUgcXVpYnVzZGFtIG5paGlsCiAgICAgICAgaXBzYW0gZmFjZXJlIGNvcnJ1cHRpLCBpbnZlbnRvcmUgdm9sdXB0YXRlIGNvbnNlcXVhdHVyIGxhYm9yaW9zYW0gb3B0aW8KICAgICAgICBtYWduYW0gb2Rpby4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5jYXJkOm50aC1jaGlsZCgybikgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICB0b3A6IDMwcHg7CiAgbGVmdDogNTBweDsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7Cn0KCi5jYXJkIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIG1hcmdpbjogMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB5ZWxsb3c7Cn0=

> Merk
>
> Det er viktig å nevne at det ikke er nødvendig å angi alle `top`, `bottom`, `left` og `right`-egenskapene for et element med en annen posisjonsverdi enn `static`. Det holder å sette én egenskap for vertikal posisjonering (`top` eller `bottom`) og én for horisontal posisjonering (`left` eller `right`).

Hva gjør egenskapen `position: relative`?

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.

Relativ Posisjonering Forklart

Awesome!

Relativ Posisjonering Forklart