position bepaalt hoe een element wordt geplaatst en of de offset properties (top/right/bottom/left) van toepassing zijn.
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute plaatst een element relatief ten opzichte van de dichtstbijzijnde ancestor die is gepositioneerd (alles anders dan static). Je stelt position: relative in op een parent om het referentiepunt vast te stellen:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
Dit relative-parent / absolute-child patroon zie je overal: badges, dropdowns, tooltips, close buttons.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0) bereikt, dan blijft het daar zolang de container in beeld is — geweldig voor sectiekoppen.absolute/fixed elementen worden uit de normale stroom verwijderd, dus zij reserveren geen ruimte — broer- en zuserelementen gedragen zich alsof zij niet bestaan, wat kan leiden tot overlapping. Plan daar voor in (bijv. voeg padding toe om te compenseren voor een fixed navbar).
position is essentieel voor overlays, sticky headers, modals, dropdowns en badges.
De relative-parent/absolute-child relatie en het fixed-versus-sticky onderscheid zijn de praktische kern die je constant gebruikt.