Position relative og absolute i CSS

Alle HTML-elementer har en posisjon, og som standard er den static. Det betyr at nettleseren viser elementene i den rekkefølgen de står i HTML-dokumentet, fra topp til bunn. Men noen ganger trenger du mer kontroll. En tooltip som skal vises over et annet element, en meny som henger fast under scrolling, eller et ikon som skal plasseres i et hjørne. CSS position gir deg fire alternativer utover static: relative, absolute, fixed og sticky.

Static: standardposisjonen i CSS

Alle elementer starter med position: static. Det betyr at elementet følger dokumentets normale flyt. Du kan ikke flytte det med top, bottom, left eller right. Static er det du har jobbet med hele veien uten å tenke over det. Elementene stables i rekkefølge, og nettleseren håndterer plasseringen.

CSS position relative: flytt uten å forstyrre

Med position: relative kan du forskyve et element fra sin opprinnelige posisjon. Elementet flytter seg visuelt, men plassen det opprinnelig tok opp i dokumentflyten forblir reservert. Andre elementer oppfører seg som om det relative elementet fortsatt står på sin gamle plass.

For å flytte elementet bruker du top, bottom, left og right. Skriver du top: 20px og left: 20px, flyttes elementet 20 piksler ned og 20 piksler mot høyre fra der det normalt ville stått. I videoleksjonen vises dette tydelig: en ytre boks med position relative forskyves, og alt innholdet inni den følger med på reisen. Du kan også bruke negative verdier for å flytte elementet motsatt vei.

Et viktig poeng: når du forskyver et element med relative, kan det overlappe andre elementer eller flyte utenfor foreldreelementet. Da får du overflytende innhold. Du kan håndtere dette med overflow: hidden på foreldreelementet for å skjule det som stikker ut, eller overflow: auto for å legge til scrolling.

Absolute: plassert i forhold til nærmeste posisjonerte forelder

Med position: absolute tas elementet helt ut av dokumentflyten. Det tar ikke lenger opp plass, og andre elementer oppfører seg som om det ikke eksisterer. I stedet plasseres det i forhold til sin nærmeste forelder som har en posisjon satt til noe annet enn static.

Det er her relative og absolute jobber sammen. En vanlig teknikk er å sette position: relative på foreldreelementet uten å forskyve det, og deretter bruke position: absolute på barnet for å plassere det nøyaktig der du vil. Foreldreelementet blir referansepunktet. Uten en posisjonert forelder bruker absolute hele nettleservinduet som referanse, noe som sjelden er ønsket.

Fixed: festet til nettleservinduet

Et element med position: fixed plasseres i forhold til nettleservinduet og blir der uansett hvor mye brukeren scroller. Navigasjonsmenyer som alltid er synlige på toppen og chatbobler i hjørnet bruker typisk fixed posisjonering. Elementet tas ut av dokumentflyten akkurat som med absolute.

Sticky: en hybrid mellom relative og fixed

Med position: sticky oppfører elementet seg som relativt posisjonert helt til brukeren scroller forbi et bestemt punkt. Da fester det seg og oppfører seg som fixed. Når brukeren scroller tilbake, glir det tilbake til sin opprinnelige posisjon. Overskrifter i lange lister og seksjonstitler bruker ofte sticky for å holde seg synlige mens brukeren leser.

Z-index: kontroller stablingsrekkefølgen

Når posisjonerte elementer overlapper hverandre, bestemmer z-index hvilket element som vises foran. Et høyere tall betyr at elementet legges oppå andre. Z-index fungerer bare på elementer som har en position-verdi satt til noe annet enn static. Uten z-index stables elementer i den rekkefølgen de står i HTML-koden.

Du kan lese mer om alle posisjoneringsmetodene i MDN sin dokumentasjon om CSS position. For å forstå hvordan elementer tar opp plass i dokumentflyten, er artikkelen om boksmodellen i CSS et nyttig supplement. Og når du vil bygge komplette sidelayouter uten å bruke position, se på CSS grid som er laget for nettopp det.