Position - CSS-tricks | CSS Almanack 2025

Den positionegenskapen kan hjälpa dig att manipulera placeringen av ett element, till exempel:

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

I förhållande till sin ursprungliga position skjuts elementet ovan nu ner från toppen med 20 pixlar. Om vi skulle animera dessa egenskaper kan vi se hur mycket kontroll det ger oss (även om detta inte är en bra idé av prestationsskäl):

relativeär bara ett av sex värden för positionfastigheten. Här är de andra:

Värden

static: varje element har en statisk position som standard, så elementet kommer att hålla sig till det normala sidflödet. Så om det finns en vänster / höger / topp / botten / z-indexuppsättning kommer det inte att ha någon effekt på det elementet.
relative: ett elementets ursprungliga position förblir i dokumentets flöde, precis som staticvärdet. Men nu fungerar vänster / höger / topp / botten / z-index. Positionsegenskaperna "knuffar" elementet från den ursprungliga positionen i den riktningen.
absolute: elementet tas bort från dokumentflödet och andra element kommer att bete sig som om det inte ens finns där medan alla andra positioneringsegenskaper fungerar på det.
fixed: elementet tas bort från dokumentflödet som absolut placerade element. I själva verket beter de sig nästan samma, endast fasta placerade element är alltid relativt dokumentet, inte någon särskild förälder, och påverkas inte av att bläddra.
sticky(experimentellt): elementet behandlas som ett relativevärde tills visningsportens rullningsläge når en angiven tröskel, vid vilken tidpunkt elementet tar en fixedposition där det uppmanas att hålla sig.
inherit: positionvärdet kaskas inte, så det kan användas för att specifikt tvinga det till och inheritpositioneringsvärdet från dess överordnade.

Absolut

Om ett underordnat element har ett absolutevärde kommer det överordnade elementet att bete sig som om barnet inte alls är där:

.element ( position: absolute; )

Och när vi försöker ställa in andra värden som left, bottomoch rightvi kommer att upptäcka att det underordnade elementet svarar inte dimensioner sin förälder, men dokumentet:

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

För att göra barnelementet placerat absolut från dess överordnade element måste vi ställa in detta på det överordnade elementet:

.parent ( position: relative; )

Nu egenskaper såsom left, right, bottomoch topkommer att hänvisa till det överordnade elementet, så att om vi gör det underordnade elementet transparent vi kan se det sitter längst ner av moder:

Fast

Det fixedvärde liknar absoluteeftersom det kan hjälpa dig att placera ett element som helst i förhållande till dokumentet, men detta värde är opåverkad genom att bläddra. Se underelementet i demo nedan och hur, när du bläddrar, fortsätter det att hålla sig längst ner på sidan:

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom	Firefox	IE	Kant	Safari
4	2	7	12	3.1

Mobil / surfplatta

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Klibbig

Det stickyvärdet är som en kompromiss mellan relativeoch fixedvärderingar. När detta skrivs är det för närvarande ett experimentellt värde, vilket innebär att det inte ingår i den officiella specifikationen och endast delvis antas av utvalda webbläsare. Med andra ord är det förmodligen inte den bästa idén att använda detta på en liveproduktionswebbplats.

Vad gör den? Tja, det låter dig placera ett element i förhållande till vad som helst i dokumentet och sedan, när en användare har rullat förbi en viss punkt i visningsområdet, fixerar du elementets position till den platsen så att den förblir ständigt visad som ett element med en fixedvärde.

Ta följande exempel:

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

Elementet kommer att vara relativt placerat tills visningsportens rullningsläge når en punkt där elementet kommer 50pxfrån toppen av visningsområdet. Vid denna punkt, blir elementet klibbig och förblir på en fixedställning 50pxupp på skärmen.

Följande demo illustrerar den punkten, där den övre navigeringen är standardposition relativeoch den andra navigeringen är inställd stickyhögst upp i visningsområdet. Observera att demoen bara fungerar i Chrome, Safari och Opera när detta skrivs.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.