Fixed og sticky positionering
Fastgør elementer til viewporten, eller opret scroll-sticky-headers og sidepaneler.
Fixed og sticky positionering er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
position: fixed
Et fast element positioneres i forhold til browserens visningsområde og bliver på sin plads, selv når siden rulles. Det fjernes også fra dokumentets layout.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Anvendelser af fast positionering
Almindelige anvendelser af position: fixed:
- Navigationsbjælker, der bliver øverst
- Flydende handlingsknapper (FAB'er)
- Chatwidgets nederst til højre
- Bannere til samtykke til cookies
- Modale overlejringer
Kompensation for faste sidehoveder
Faste sidehoveder overlapper indholdet nedenunder. Tilføj padding eller margin i toppen svarende til sidehovedets højde for at skubbe indholdet ned:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Transformerede forældreelementer og fixed
En vigtig særhed er, at hvis et forældreelement har fået anvendt CSS-egenskaben transform, perspective eller filter, bliver fast positionering relativ til det forældreelement i stedet for visningsområdet. Det er en almindelig fejl.
position: sticky
position: sticky er en kombination: Elementet ruller normalt, indtil det når en defineret grænse (f.eks. top: 0), hvorefter det bliver siddende inden for sit forældreelement.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
Sticky kræver en rullelig forælder
Det sticky element bliver siddende inden for sin indeholdende blok. Hvis forældreelementet ikke er højt nok til at kunne rulle, har sticky ingen effekt. Forældreelementet må ikke have skjult overflow.
Top, højre, bund, venstre for sticky
Du skal angive mindst én forskydning, for at sticky aktiveres. Almindelige mønstre er:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Sticky-tabeloverskrifter
Sticky er perfekt til tabeloverskrifter i rullelige tabelomslag — overskriften forbliver synlig, mens brugeren ruller gennem rækkerne.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Mønster for sticky-sidepanel
Et klassisk sticky-sidepanel, der forbliver synligt, mens hovedindholdet ruller:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Oversigt over fixed kontra sticky
Vigtige forskelle:
- Fixed: altid i forhold til visningsområdet, altid uden for layoutet
- Sticky: ruller med indholdet indtil en grænse, forbliver i layoutet og stopper ved forældreelementets grænse
Ydeevne: fixed og lag
Faste elementer opretter en ny stablingskontekst og kan udløse layoutberegning under rulning, hvis de overlapper områder, der skal gentegnes. Hold faste elementer enkle, og undgå tunge egenskaber som box-shadow på dem.
Hurtig kontrol
Hvilken begrænsning har position: sticky, som position: fixed ikke har?
Opsummering
position: fixed forankrer elementer til visningsområdet til fast navigation og overlejringer. position: sticky ruller normalt, indtil det når en grænse, og bliver derefter siddende — perfekt til tabeloverskrifter og sidepaneler. Begge kræver mindst én forskydningsegenskab for at aktivere fastlåsningen.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Fixed og sticky positionering” gratis?
Ja — hele teksten til “Fixed og sticky positionering” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Fixed og sticky positionering”?
Fastgør elementer til viewporten, eller opret scroll-sticky-headers og sidepaneler. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Fixed og sticky positionering”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Statisk og relativ positionering
- Absolut positionering og containing block
- Fixed og sticky positionering
- Z-index og stacking context