Positionering: relative, absolute, fixed en sticky
Haal elementen met position-waarden uit de normale flow om content te overlappen, headers vast te zetten en sticky sidebars te maken.
Positionering: relative, absolute, fixed en sticky is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Normale documentstroom
Standaard volgen elementen de normale documentstroom: blokelementen worden verticaal gestapeld en inline-elementen lopen horizontaal mee met tekst. Met de eigenschap position kun je buiten deze stroom stappen voor overlays, vaste kopteksten en tooltips.
position: static (standaard)
Elk element begint met position: static. Dit betekent dat het volgens de normale documentstroom wordt geplaatst. De eigenschappen top, right, bottom en left hebben geen effect op statische elementen.
position: relative
position: relative houdt het element in de normale stroom, maar laat je het vanaf zijn oorspronkelijke positie verschuiven met top, right, bottom en left. Belangrijk is dat hiermee een positioneringscontext voor absoluut gepositioneerde nakomelingen wordt gemaakt.
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}position: absolute
position: absolute haalt het element uit de normale stroom. Het wordt gepositioneerd ten opzichte van zijn dichtstbijzijnde gepositioneerde voorouder (elke positie behalve static). Als er geen gepositioneerde voorouder is, wordt het gepositioneerd ten opzichte van de viewport.
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}De eigenschap z-index
Gepositioneerde elementen kunnen elkaar overlappen. Gebruik z-index om de stapelvolgorde te bepalen. Een hogere z-index komt bovenop. Dit werkt alleen op gepositioneerde elementen (niet op static). Er wordt een nieuwe stapelcontext gemaakt.
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}position: fixed
position: fixed haalt het element uit de normale stroom en verankert het aan de viewport. Het schuift niet mee met de pagina. Ideaal voor vaste koppen, zwevende actieknoppen en cookiebanners.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky
position: sticky is een hybride vorm: het element schuift mee met de pagina totdat het een drempel bereikt (ingesteld met top/bottom), waarna het blijft vaststaan. Handig voor sectiekoppen in lange tabellen of zijbalken die na de kop blijven staan.
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}Centreren met position: absolute
Een klassieke techniek: combineer position: absolute; top: 50%; left: 50% met transform: translate(-50%, -50%) om een element perfect te centreren binnen zijn gepositioneerde ouder.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}overflow: hidden knipt absoluut gepositioneerde kinderen af
Een absoluut gepositioneerd kind kan standaard buiten de grenzen van zijn ouder vallen. Voeg overflow: hidden toe aan de ouder om alles buiten het vak af te knippen — handig voor effecten met kaartafbeeldingen en het afknippen van badges.
Valkuil: onbedoelde stapelcontexten
Sommige eigenschappen maken onbedoeld stapelcontexten: transform, filter, isolation: isolate. Dit kan z-index-conflicten veroorzaken waarbij een element met z-index: 9999 toch achter een ander element staat, omdat het zich in een lagere stapelcontext bevindt.
Wanneer gebruik je elke positionering
relative: verschuivingen en een positioneringscontext. absolute: badges, tooltips en overlays ten opzichte van een ouder. fixed: vaste koppen, modale vensters en meldingen. sticky: sectiekoppen en zijbalknavigatie die met het scrollen meegaat. Vermijd positionering voor lay-outs — gebruik Flex of Grid.
Korte controle
Een element heeft position: absolute; top: 0; right: 0;. Waar verschijnt het als de ouder position: relative heeft?
Samenvatting: CSS-positionering
static is de standaard. relative verschuift het element zonder het uit de normale stroom te halen en maakt een positioneringscontext. absolute haalt het element uit de normale stroom en positioneert het ten opzichte van de dichtstbijzijnde gepositioneerde voorouder. fixed blijft aan de viewport vaststaan. sticky schuift mee en blijft daarna vaststaan. Gebruik z-index om de volgorde van overlapping te bepalen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Positionering: relative, absolute, fixed en sticky” gratis?
Ja — de volledige tekst van “Positionering: relative, absolute, fixed en sticky” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Positionering: relative, absolute, fixed en sticky”?
Haal elementen met position-waarden uit de normale flow om content te overlappen, headers vast te zetten en sticky sidebars te maken. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Positionering: relative, absolute, fixed en sticky”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Selectors en de cascade
- Kleuren, typografie en het boxmodel
- Display: de basis van block, inline, flex en grid
- Positionering: relative, absolute, fixed en sticky