Fixed og Sticky-posisjonering
Fest elementer til visningsområdet, eller opprett overskrifter og sidepaneler som fester seg ved rulling.
Fixed og Sticky-posisjonering er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
position: fixed
Et fixed-element posisjoneres relativt til nettleserens viewport og blir værende på samme sted selv når siden rulles. Det fjernes også fra dokumentflyten.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Bruksområder for fixed-posisjonering
Vanlige bruksområder for position: fixed:
- Navigasjonslinjer som blir værende øverst
- Flytende handlingsknapper (FAB-er)
- Chat-widgeter nederst til høyre
- Bannere for informasjonskapselsamtykke
- Modale overlegg
Kompensere for faste topptekster
Faste topptekster overlapper innholdet nedenfor. Legg til en øvre padding eller margin som tilsvarer høyden på toppteksten, slik at innholdet flyttes ned:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Transformerte foreldre og fixed
En viktig særhet er at hvis et overordnet element har CSS-transform, perspective eller filter brukt på seg, blir fixed-posisjonering relativ til dette elementet, ikke viewporten. Dette er en vanlig feil.
position: sticky
position: sticky er en kombinasjon: Elementet ruller normalt til det når en definert terskel (for eksempel top: 0), og fester seg deretter på plass innenfor foreldercontaineren.
<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 krever en rullbar forelder
Det sticky-elementet fester seg innenfor sin containing block. Hvis forelderen ikke er høy nok til at innholdet kan rulles, har sticky ingen effekt. Forelderen må ha overflow som ikke er satt til hidden.
Top Right Bottom Left for sticky
Minst én forskyvning må defineres for at sticky skal aktiveres. Vanlige mønstre:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Sticky-tabellhoder
Sticky egner seg perfekt for tabellhoder i rullbare tabellomslag – hodet forblir synlig mens brukeren ruller gjennom radene.
<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 som forblir synlig mens hovedinnholdet rulles:
<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>
Sammendrag: Fixed kontra Sticky
Viktige forskjeller:
- Fixed: alltid relativ til viewporten, alltid utenfor flyten
- Sticky: ruller med innholdet frem til terskelen, forblir i flyten og stopper ved forelderens grense
Ytelse: Fixed og lag
Fixed-elementer oppretter en ny stablingskontekst og kan utløse layout ved rulling hvis de overlapper områder som skal tegnes på nytt. Hold fixed-elementer enkle, og unngå kostbare egenskaper som box-shadow på dem.
Kort sjekk
Hvilken begrensning har position: sticky som position: fixed ikke har?
Oppsummering
position: fixed forankrer elementer til viewporten for klebrig navigasjon og overlegg. position: sticky ruller normalt til en terskel og fester seg deretter – perfekt for tabellhoder og sidepaneler. Begge krever minst én forskyvningsegenskap for å aktivere fastlåsingen.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Fixed og Sticky-posisjonering» gratis?
Ja – hele teksten i «Fixed og Sticky-posisjonering» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Fixed og Sticky-posisjonering»?
Fest elementer til visningsområdet, eller opprett overskrifter og sidepaneler som fester seg ved rulling. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Fixed og Sticky-posisjonering»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Statisk og relativ posisjonering
- Absolutt posisjonering og containing block
- Fixed og Sticky-posisjonering
- Z-index og stablingskontekst