position steuert, wie ein Element positioniert wird und ob die Offset-Eigenschaften (top/right/bottom/left) angewendet werden.
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute positioniert ein Element relativ zu seinem nächsten positionierten Vorfahren (alles außer static). Sie setzen also position: relative auf ein Parent-Element, um es zum Referenzpunkt zu machen:
.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 */
}
Dieses relative-parent / absolute-child-Muster ist überall: Badges, Dropdowns, Tooltips, Schließen-Schaltflächen.
.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) erreicht, dann bleibt sie dort, während ihr Container in Sicht ist – hervorragend für Abschnittsüberschriften.absolute/fixed-Elemente werden aus dem normalen Fluss entfernt, daher reservieren sie keinen Platz – Geschwisterelemente verhalten sich so, als wären sie nicht vorhanden, was Überlappungen verursachen kann. Planen Sie dafür (z. B. Padding hinzufügen, um eine fixed Navbar auszugleichen).
position ist unverzichtbar für Overlays, Sticky Headers, Modals, Dropdowns und Badges.
Das relative-parent/absolute-child-Verhältnis und die fixed-vs-sticky-Unterscheidung sind der praktische Kern, den Sie ständig verwenden.