Positie - CSS-trucs | CSS Almanac 2025

De positioneigenschap kan u helpen bij het manipuleren van de locatie van een element, bijvoorbeeld:

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

Ten opzichte van de oorspronkelijke positie wordt het bovenstaande element nu 20 px omlaag geduwd vanaf de bovenkant. Als we deze eigenschappen zouden animeren, kunnen we zien hoeveel controle dit ons geeft (hoewel dit om prestatieredenen geen goed idee is):

relativeis slechts een van de zes waarden voor de positioneigenschap. Hier zijn de anderen:

Waarden

static: elk element heeft standaard een statische positie, dus het element blijft bij de normale paginastroom. Dus als er een links / rechts / boven / onder / z-indexset is, heeft dat geen effect op dat element.
relative: de oorspronkelijke positie van een element blijft in de stroom van het document, net als de staticwaarde. Maar nu zal links / rechts / boven / onder / z-index werken. De positionele eigenschappen "duwen" het element van de oorspronkelijke positie in die richting.
absolute: het element wordt verwijderd uit de stroom van het document en andere elementen zullen zich gedragen alsof het er niet eens is, terwijl alle andere positionele eigenschappen eraan werken.
fixed: het element wordt als absoluut gepositioneerde elementen uit de stroom van het document verwijderd. In feite gedragen ze zich bijna hetzelfde, alleen vast geplaatste elementen zijn altijd relatief ten opzichte van het document, niet een bepaalde ouder, en worden niet beïnvloed door scrollen.
sticky(experimenteel): het element wordt als een relativewaarde behandeld totdat de scroll-locatie van de viewport een gespecificeerde drempel bereikt, op welk punt het element een fixedpositie inneemt waar het moet blijven plakken.
inherit: de positionwaarde loopt niet in cascade, dus dit kan worden gebruikt om het specifiek te forceren, en inheritde positioneringswaarde van de ouder.

Absoluut

Als een onderliggend element een absolutewaarde heeft, gedraagt het bovenliggende element zich alsof het kind er helemaal niet is:

.element ( position: absolute; )

En als we proberen om andere waarden zoals ingesteld left, bottomen rightwe vinden dat het kind element niet reageert op de afmetingen van zijn ouder, maar het document:

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

Om het onderliggende element absoluut te positioneren ten opzichte van het bovenliggende element, moeten we dit instellen op het bovenliggende element zelf:

.parent ( position: relative; )

Nu eigenschappen, zoals left, right, bottomen topzal verwijzen naar het bovenliggende element, zodat als we het kind element transparante we kunnen zien het zitten direct aan de onderkant van de moedermaatschappij:

Gemaakt

De fixedwaarde is vergelijkbaar met het feit absolutedat het u kan helpen om een element ergens ten opzichte van het document te plaatsen, maar deze waarde wordt niet beïnvloed door scrollen. Bekijk het onderliggende element in de onderstaande demo en hoe het, als je eenmaal scrolt, onder aan de pagina blijft staan:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome	Firefox	D.W.Z	Rand	Safari
4	2	7	12	3.1

Mobiel / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Kleverig

De stickywaarde is als een compromis tussen relativeen fixedwaarden. Op het moment van schrijven is het momenteel een experimentele waarde, wat betekent dat het geen deel uitmaakt van de officiële specificatie en slechts gedeeltelijk wordt overgenomen door geselecteerde browsers. Met andere woorden, het is waarschijnlijk niet het beste idee om dit op een live productiewebsite te gebruiken.

Wat doet het? Welnu, het stelt je in staat om een element relatief ten opzichte van iets op het document te plaatsen en vervolgens, zodra een gebruiker voorbij een bepaald punt in de viewport is gescrolld, de positie van het element op die locatie vast te leggen zodat het permanent weergegeven blijft als een element met een fixedwaarde.

Neem het volgende voorbeeld:

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

Het element zal relatief gepositioneerd zijn totdat de scrolllocatie van de viewport een punt bereikt waar het element zich 50pxvanaf de bovenkant van de viewport bevindt. Op dat moment wordt het element plakkerig en blijft het op een fixedpositie 50pxbovenaan het scherm.

De volgende demo illustreert dat punt, waar de bovenste navigatie de standaardpositie is relativeen de tweede navigatie stickyhelemaal bovenaan de viewport. Houd er rekening mee dat de demo op het moment van schrijven alleen werkt in Chrome, Safari en Opera.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.