CSS position: demo van static, relative, absolute, fixed en sticky | We.Inc
Wissel één element tussen static, relative, absolute, fixed en sticky in een scrollende demo. Containing blocks, inset, problemen met sticky oplossen en centreren uitgelegd.
De eigenschap position bepaalt hoe een element wordt geplaatst. static is de normale flow. relative verschuift het element terwijl de ruimte behouden blijft. absolute haalt het uit de flow en plaatst het ten opzichte van de dichtstbijzijnde gepositioneerde voorouder. fixed zet het vast aan de viewport. sticky scrolt normaal mee tot het een drempel bereikt, zoals top: 0, en blijft daar dan staan.
De vijf waarden
Waarde
In de flow?
Geplaatst ten opzichte van
Blijft in de flow
Niets, top/left hebben geen effect
Blijft in de flow, de oorspronkelijke ruimte blijft behouden
Zijn eigen normale positie
Uit de flow gehaald
Padding box van de dichtstbijzijnde gepositioneerde voorouder
Uit de flow gehaald
De viewport, tenzij een voorouder transform, filter of iets vergelijkbaars heeft
Blijft in de flow
Dichtstbijzijnde scrollende voorouder, binnen de eigen ouder
De demo hieronder heeft één oranje vak in een scrollbaar gebied. Wissel de position-waarde, verschuif de offsets, scrol en kijk waarvandaan het wordt gemeten. Daarna volgen uitleg over containing blocks, een checklist voor sticky dat niet blijft plakken en de inset-shorthand.
Kies een position-waarde voor het oranje vak.
Stel top en left in, en zet de gepositioneerde ouder aan of uit om te zien welk vak absolute gebruikt.
Scrol in de demo om fixed en sticky te vergelijken.
Kopieer de CSS die past bij wat u ziet.
Zet position: relative op een kaart, dan gebruiken absolute kinderen die kaart als hun kader. Dat ene patroon dekt de meeste lay-outs met badges en overlays.
Gebruik liever inset: 0 dan top, right, bottom en left apart te schrijven.
Een fixed element binnen iets met transform, filter, perspective of contain: paint staat niet meer vast aan het scherm. Verplaats het naar het einde van body, of render het in een portal.
Gepositioneerde elementen worden standaard boven statische getekend. Gebruik z-index alleen als twee gepositioneerde elementen elkaar overlappen.
Veelgestelde vragen
Wat is het verschil tussen absolute en relative?
relative verschuift een element visueel, maar laat de oorspronkelijke ruimte in de lay-out staan, zodat er niets omheen beweegt. absolute haalt het element helemaal uit de lay-out, de buren sluiten het gat, en top of left worden gemeten vanaf de dichtstbijzijnde gepositioneerde voorouder in plaats van vanaf de plek waar het zou hebben gestaan.
Waarom werkt position: sticky niet?
De gebruikelijke oorzaken zijn een ontbrekende top-waarde, een voorouder met overflow hidden of auto, of een ouder die niet hoger is dan het sticky element. Loop de checklist op deze pagina in volgorde door; de eerste twee punten verklaren de meeste gevallen.
Ten opzichte waarvan positioneert absolute?
Ten opzichte van zijn containing block: de padding box van de dichtstbijzijnde voorouder waarvan position iets anders is dan static. Voorouders met een transform, filter of bepaalde contain-waarden tellen ook mee. Bestaat er geen, dan is het het initiële containing block, dat de grootte van de viewport heeft.
Waarom beweegt mijn fixed header mee met de pagina?
Een voorouder heeft een transform, perspective, filter, backdrop-filter, will-change: transform of contain: paint. Elk daarvan maakt die voorouder tot het containing block voor fixed afstammelingen, dus de header staat vast aan die voorouder in plaats van aan het scherm.
Wat is inset in CSS?
Een shorthand voor top, right, bottom en left, met hetzelfde patroon van één tot vier waarden als margin. inset: 0 rekt een gepositioneerd element uit over zijn containing block. inset-inline en inset-block stellen de paren per as in.
Het containing block, in gewone taal
Elke offset heeft een referentierechthoek nodig. Voor static en relative elementen is dat de content box van de ouder. Voor absolute is het de padding box van de dichtstbijzijnde gepositioneerde voorouder, dus padding op de kaart duwt een absoluut kind niet naar binnen.
Voor fixed is het normaal gesproken de viewport. Dat verandert als een voorouder transform, perspective, filter, backdrop-filter, contain: paint of een overeenkomende will-change-waarde krijgt: die voorouder wordt dan de referentie en het element scrolt ermee mee. De demo op deze pagina gebruikt precies dat, zodat het fixed vak binnen het demoframe blijft.
Centreren met absolute positionering
Met een bekende grootte zet inset: 0 plus margin: auto het vak precies in het midden en blijven de pixelranden scherp. Met een onbekende grootte werken top: 50% en left: 50% gevolgd door translate(-50%, -50%) voor elke content.
Beide halen het vak uit de flow, dus de ouder groeit er niet omheen. Moet de ouder zich aan de content aanpassen, gebruik dan centreren met grid of flex.
Elke waarde in detail
position-waarden
Waarde
Flow
Wat offsets doen
Typisch gebruik
Blijft in de flow
Genegeerd
De standaard. Alles begint hier.
Blijft in de flow, de oorspronkelijke ruimte blijft behouden
Verschuiven vanaf de plek waar het zou staan
Kleine verschuivingen, en als anker voor absolute kinderen.
Wat een containing block maakt voor absolute en fixed
Voorouders die gepositioneerde afstammelingen opvangen (volgens MDN)
Voorouder heeft
Gebruiken absolute kinderen hem?
Gebruiken fixed kinderen hem?
position: relative, absolute, fixed of sticky
Ja
Nee
transform, perspective, rotate, scale of translate anders dan none
Ja
Ja
filter of backdrop-filter anders dan none
Ja
Ja
contain: layout, paint, strict of content
Ja
Ja
will-change die een van die eigenschappen noemt, zoals transform of filter
Ja
Ja
content-visibility: auto
Ja
Ja
Patronen die u gaat gebruiken
Badge op de hoek van een kaart
De kaart is de gepositioneerde voorouder. Negatieve offsets duwen de badge half buiten de hoek.
Sticky tabelkop
De wrapper scrolt, dus th met top: 0 blijft eraan plakken. De achtergrond voorkomt dat rijen erdoorheen schijnen.
inset-shorthand
Hetzelfde patroon als margin: één waarde voor alle kanten, twee voor verticaal en horizontaal, vier met de klok mee vanaf boven.
U hebt een drempel ingesteld: top, bottom, left of right. Zonder drempel gedraagt sticky zich als relative.
Geen voorouder tussen het element en de scroller heeft overflow: hidden, auto of scroll. Elk daarvan wordt de scroller, vaak een die nooit scrolt. overflow: clip maakt geen scrollcontainer.
De ouder is hoger dan het sticky element. Het plakt alleen zolang de ouder in beeld is en verdwijnt daarna mee.
In een flex- of grid-rij is het item niet uitgerekt tot de volle hoogte. Voeg align-self: start toe zodat het ruimte heeft om te bewegen.
Het sticky element ligt boven de content die eronder door scrolt. Geef het een achtergrond en een z-index als content erdoorheen schijnt.
Er wordt echt gescrold op de voorouder waarvan u dat denkt. Controleer in DevTools welk element de scrollbalk heeft.
Position-speeltuin
position-waarde
Ouder heeft position: relative
Offsets worden genegeerd. Het vak staat in de normale flow tussen de alinea's.
Het vak wordt verschoven getekend, maar het gat waar het zou staan blijft behouden. Buren bewegen niet.
Gemeten vanaf de gestippelde ouder, die position: relative heeft.
Geen gepositioneerde ouder, dus het wordt gemeten vanaf het scrollende demogebied, de volgende gepositioneerde voorouder.
Vastgezet aan het demoframe terwijl u scrolt. Het frame heeft een transform, waardoor het het containing block wordt in plaats van het browservenster.
Scrolt mee met de tekst tot het top pixels van de bovenkant van de scroller staat, en blijft dan staan tot de ouder wegscrolt.
Scrollbaar demogebied
Scrol in dit frame. De tekst is opvulling, zodat er iets is om langs te scrollen.
Ouder
Eerste alinea vóór het vak.
Alinea na het vak. Let op of deze omhoog schuift als het vak de flow verlaat.
Regel {n} met extra content om te scrollen.
Content na de ouder, regel {n}.
CSS kopiëren
Waarom fixed in het frame blijft: het frame heeft transform: translateZ(0). Elke transform maakt een element tot het containing block voor fixed afstammelingen. Op een echte pagina zonder zo'n voorouder hecht fixed zich aan het browservenster.
Sticky werkt niet: checklist
Sticky header verborgen achter andere content? Zie