Stilling - CSS-triks | CSS-almanakk 2025

Den positionegenskapen kan hjelpe deg manipulere plasseringen av et element, for eksempel:

.element ( position: relative; top: 20px; )

I forhold til sin opprinnelige posisjon, vil elementet ovenfor bli dyttet ned fra toppen med 20 piksler. Hvis vi skulle animere disse egenskapene, kan vi se hvor mye kontroll dette gir oss (selv om dette ikke er en god ide av ytelsesgrunner):

relativeer bare en av seks verdier for positioneiendommen. Her er de andre:

Verdier

static: hvert element har en statisk posisjon som standard, så elementet vil holde seg til den normale sidestrømmen. Så hvis det er satt til venstre / høyre / topp / bunn / z-indeks, vil det ikke ha noen effekt på det elementet.
relative: et elementets opprinnelige posisjon forblir i flyten av dokumentet, akkurat som staticverdien. Men nå vil venstre / høyre / topp / bunn / z-indeks fungere. Posisjonsegenskapene "skyver" elementet fra den opprinnelige posisjonen i den retningen.
absolute: elementet fjernes fra strømmen av dokumentet, og andre elementer vil oppføre seg som om det ikke engang er der mens alle andre posisjonsegenskaper vil fungere på det.
fixed: elementet fjernes fra strømmen av dokumentet som absolutt plasserte elementer. Faktisk oppfører de seg nesten det samme, bare faste plasserte elementer er alltid i forhold til dokumentet, ikke noen bestemt foreldre, og påvirkes ikke av å bla.
sticky(eksperimentelt): elementet blir behandlet som en relativeverdi til rulleplasseringen til visningsområdet når en spesifisert terskel, på hvilket tidspunkt elementet tar en fixedposisjon der det blir bedt om å holde seg.
inherit: positionverdien kaskades ikke, så dette kan brukes til å spesifikt tvinge den til, og inheritposisjonsverdien fra foreldrene.

Absolutt

Hvis et underordnet element har en absoluteverdi, vil det overordnede elementet oppføre seg som om barnet ikke er der i det hele tatt:

.element ( position: absolute; )

Og når vi prøver å sette andre verdier som left, bottomog rightvi vil finne at barnet elementet svarer ikke til de dimensjonene av foreldrene sine, men dokumentet:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

For å gjøre underordnet element plassert absolutt fra det overordnede elementet, må vi sette dette på selve overordnet element:

.parent ( position: relative; )

Nå egenskaper som left, right, bottomog topvil referere til den overordnede element, slik at hvis vi gjør barnet element gjennomsiktig kan vi se det sitter rett på bunnen av den overordnede:

Fikset

Den fixedverdien er lik absolutesom den kan hjelpe deg å plassere et element hvor som helst i forhold til dokumentet, men denne verdien er upåvirket av bla. Se underelementet i demo nedenfor og hvordan det, når du blar, fortsetter å holde seg nederst på siden:

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome	Firefox	DVS	Kant	Safari
4	2	7	12	3.1

Mobil / nettbrett

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Klissete

Den stickyverdien er som et kompromiss mellom relativeog fixedverdier. I skrivende stund er det for øyeblikket en eksperimentell verdi, noe som betyr at den ikke er en del av den offisielle spesifikasjonen og bare delvis er vedtatt av utvalgte nettlesere. Med andre ord er det sannsynligvis ikke den beste ideen å bruke dette på et live produksjonsnettsted.

Hva gjør den? Vel, det lar deg plassere et element i forhold til hva som helst i dokumentet, og så, når en bruker har rullet forbi et bestemt punkt i visningsfeltet, fikser du posisjonen til elementet til det stedet slik at det forblir kontinuerlig vist som et element med en fixedverdi.

Ta følgende eksempel:

.element ( position: sticky; top: 50px; )

Elementet vil være relativt plassert til rulleposisjonen til visningsområdet når et punkt der elementet vil være 50pxfra toppen av visningsområdet. På det tidspunktet blir elementet klebrig og forblir på en fixedposisjon 50pxøverst på skjermen.

Følgende demo illustrerer det punktet, der toppnavigasjonen er standardposisjonering relativeog den andre navigasjonen er satt til stickyhelt øverst i visningsområdet. Vær oppmerksom på at demoen bare fungerer i Chrome, Safari og Opera når dette skrives.

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.