Welche CSS position-Werte gibt es?

Question

Accepted Answer

`position` steuert, wie ein Element positioniert wird und ob die Offset-Eigenschaften (`top`/`right`/`bottom`/`left`) angewendet werden.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: das Schlüsselpaar

`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:

```css
.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.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — in den Viewport gesperrt (immer sichtbar), z. B. eine persistente Navbar.
- **sticky** — verhält sich relativ, bis sie die Schwelle (`top: 0`) erreicht, dann bleibt sie dort, während ihr Container in Sicht ist – hervorragend für Abschnittsüberschriften.

## Eine häufige Falle

`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).

## Warum es wichtig ist

`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.