Statisk och relativ positionering

Egenskapen position styr hur ett element placeras i dokumentflödet. De fem värdena är: static, relative, absolute, fixed och sticky.

Alla element har som standard position: static. Statiska element följer det normala dokumentflödet — blockelement staplas vertikalt och inline-element flödar från vänster till höger. Förskjutningsegenskaperna (top, right, bottom, left) har ingen effekt.

position: relative låter elementet vara kvar i det normala flödet, men gör det möjligt att förskjuta det i förhållande till sin egen normala position med top, right, bottom och left.

När position: relative används med förskjutningar flyttas elementet visuellt, men dess ursprungliga layoututrymme är fortfarande reserverat. Andra element fyller inte tomrummet.

Förskjutningsegenskaper flyttar elementet från dess referenspunkt:

• top: flyttar nedåt från den övre kanten
• left: flyttar åt höger från den vänstra kanten
• Negativa värden vänder riktningen

z-index fungerar endast på positionerade element (inte statiska). Om lagerordningen behöver styras ska minst position: relative anges.

Den viktigaste användningen av position: relative är att göra ett element till ett innehållande block för absolut positionerade underordnade element — även utan förskjutningsvärden.

Om position: relative kombineras med transform skapas en ny staplingskontext. Elementet förblir i flödet, men kan transformeras visuellt.

Undvik att ange position: relative på varje element. Det skapar staplingskontexter som kan göra hanteringen av z-index mer komplicerad. Använd det endast när förskjutningar behövs eller när absolut positionerade underordnade element ska förankras.

Eftersom relativ positionering inte påverkar layoutflödet går det bra att animera top/left för visuella effekter — även om animering av transform: translate() ger bättre prestanda.

I DevTools kan panelen Computed användas för att se det effektiva värdet för position. Boxmodellens diagram visar de exakta förskjutningskoordinater som tillämpas.

position: static är standardvärdet — inga förskjutningar och ingen stapling. position: relative möjliggör förskjutningar från elementets egen position och bevarar dess layoututrymme. Den viktigaste rollen är att fungera som innehållande block för absolut positionerade underordnade element.