Position - CSS-tricks | CSS Almanak 2025

Den positionegenskab kan hjælpe dig med at manipulere placeringen af et element, for eksempel:

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

I forhold til sin oprindelige position skubbes elementet ovenfor 20px ned fra toppen. Hvis vi skulle animere disse egenskaber, kan vi se, hvor meget kontrol dette giver os (selvom dette ikke er en god idé af ydeevneårsager):

relativeer kun en af seks værdier for positionejendommen. Her er de andre:

Værdier

static: hvert element har en statisk position som standard, så elementet holder sig til den normale sidestrøm. Så hvis der er et venstre / højre / top / bund / z-indeks, så vil der ikke være nogen effekt på dette element.
relative: elementets oprindelige position forbliver i dokumentets strøm, ligesom staticværdien. Men nu fungerer venstre / højre / top / bund / z-indeks. Positionsegenskaberne "skubber" elementet fra den oprindelige position i den retning.
absolute: elementet fjernes fra strømmen af dokumentet, og andre elementer vil opføre sig som om det ikke engang er der, mens alle de andre positionelle egenskaber fungerer på det.
fixed: elementet fjernes fra strømmen af dokumentet som absolut placerede elementer. Faktisk opfører de sig næsten det samme, kun faste placerede elementer er altid i forhold til dokumentet, ikke nogen bestemt forælder, og de påvirkes ikke af at rulle.
sticky(eksperimentelt): elementet behandles som en relativeværdi, indtil visningsportens rulleplacering når en specificeret tærskel, på hvilket tidspunkt elementet indtager en fixedposition, hvor det bliver bedt om at holde fast.
inherit: positionværdien kaskaderes ikke, så dette kan bruges til specifikt at tvinge den til, og inheritplaceringsværdien fra dens overordnede.

Absolut

Hvis et underordnet element har en absoluteværdi, vil det overordnede element opføre sig som om barnet slet ikke er der:

.element ( position: absolute; )

Og når vi forsøger at sætte andre værdier som left, bottomog rightvi vil opdage, at barnet element reagerer ikke på de dimensioner af sin forælder, men dokumentet:

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

For at gøre underordnet element placeret absolut fra dets overordnede element er vi nødt til at indstille dette på forældreelementet selv:

.parent ( position: relative; )

Nu egenskaber såsom left, right, bottomog topvil henvise til den forælder element, så hvis vi gør barnet element gennemsigtig vi kan se det sidder lige i bunden af den forælder:

Fast

Den fixedværdi svarer til absolute, da det kan hjælpe dig med at placere et element hvor som helst i forhold til dokumentet, men denne værdi er upåvirket ved at rulle. Se underelementet i demoen nedenfor, og hvordan det, når du ruller, fortsætter med at holde fast i bunden af siden:

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome	Firefox	IE	Edge	Safari
4	2	7	12	3.1

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Klæbrig

Den stickyværdi som et kompromis mellem relativeog fixedværdier. I skrivende stund er det i øjeblikket en eksperimentel værdi, hvilket betyder, at den ikke er en del af den officielle specifikation og kun delvist er vedtaget af udvalgte browsere. Med andre ord er det sandsynligvis ikke den bedste idé at bruge dette på et live produktionswebsted.

Hvad gør den? Nå, det giver dig mulighed for at placere et element i forhold til noget i dokumentet, og derefter, når en bruger har rullet forbi et bestemt punkt i visningsporten, skal du rette elementets position til den placering, så den forbliver vedvarende vist som et element med en fixedværdi.

Tag følgende eksempel:

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

Elementet placeres relativt, indtil visningsportens rulleplacering når et punkt, hvor elementet vil være 50pxfra toppen af visningsporten. På det tidspunkt, at elementet bliver klistret og forbliver på et fixedposition 50pxøverst på skærmen.

Den følgende demo illustrerer det punkt, hvor topnavigationen er standardpositionering relative, og den anden navigation er indstillet stickyhelt øverst i visningen. Bemærk, at demoen kun fungerer i Chrome, Safari og Opera, når dette skrives.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.