Positionierung

Der Normal Flow

Standardmäßig ordnet der Browser Elemente im Normal Flow an: Block-Elemente untereinander, Inline-Elemente nebeneinander im Text. Das kennt ihr schon aus dem display-Abschnitt. Die Eigenschaft position erlaubt es, davon gezielt abzuweichen.

.box {
  position: static; /* Standardwert - "im normalen Fluss", keine Sonderbehandlung */
}

Vier Werte weichen vom Normal Flow ab: relative, absolute, fixed, sticky. Alle vier nutzen top/right/bottom/left, um die Position festzulegen.

position: relative - verschoben, aber Platz bleibt reserviert

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

• Das Element wird relativ zu seiner ursprünglichen Position verschoben
• Der Platz im Layout bleibt reserviert - andere Elemente rutschen nicht nach, es entsteht eine “Lücke”
• Am häufigsten genutzt, ohne top/left zu setzen: nur um einen Bezugsrahmen für position: absolute-Kinder zu schaffen (siehe nächster Abschnitt)

position: absolute - herausgelöst aus dem Fluss

.parent {
  position: relative; /* wird zum Bezugsrahmen */
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

• Das Element wird komplett aus dem Normal Flow entfernt - es hinterlässt keine Lücke, andere Elemente verhalten sich, als wäre es gar nicht da
• Positioniert wird relativ zum nächsten Vorfahren mit position ≠ static - meist bewusst ein position: relative-Elternelement
• Gibt es keinen solchen Vorfahren, wird relativ zum gesamten Dokument positioniert

Merksatz

„Absolute is relative to relative.” Ein absolute-Element sucht sich den nächsten Vorfahren mit position: relative (oder absolute/fixed/sticky) als Bezugsrahmen. Deshalb sieht man die beiden fast immer im Paar.

Praxisbeispiel: Ein Badge in der Ecke einer Card

.card {
  position: relative;
  padding: 16px;
}

.card .badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: tomato;
  color: white;
  border-radius: 999px;
  padding: 2px 8px;
}

position: fixed - fest zum Bildschirm

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

• Positioniert relativ zum Viewport (sichtbarer Browser-Ausschnitt) - bleibt beim Scrollen an derselben Stelle stehen
• Ebenfalls aus dem Normal Flow entfernt, wie absolute
• Typische Einsätze: ein “Nach oben”-Button, ein Cookie-Banner, eine schwebende Chat-Bubble

position: sticky - Hybrid aus beidem

.section-header {
  position: sticky;
  top: 0;
}

• Verhält sich wie relative - bis die Scroll-Position einen Schwellwert (top: 0) erreicht, dann „klebt” es wie fixed, aber nur innerhalb seines Eltern-Containers
• Sobald der Eltern-Container aus dem Viewport scrollt, verschwindet das Element mit ihm
• Braucht immer einen Schwellwert (top, bottom, …) - ohne den verhält es sich wie relative

Praxisbeispiel: Eine Kategorie-Überschrift, die beim Scrollen oben “kleben” bleibt, bis die nächste Kategorie kommt

.category-header {
  position: sticky;
  top: 0;
  background-color: white; /* wichtig: Inhalt scrollt sonst sichtbar "durch" die Überschrift */
}

Achtung

Ohne eigenen background-color scrollt der Text darunter sichtbar durch die sticky Überschrift hindurch.

Klassischer Stolperstein

position: sticky funktioniert nicht, wenn irgendein Vorfahre overflow: hidden, overflow: auto oder overflow: scroll gesetzt hat (siehe overflow-Abschnitt im Box-Modell-Kapitel). Der Vorfahre schneidet dann die eigentlich mögliche “Klebe-Bewegung” ab. Klebt ein sticky-Element nicht wie erwartet, ist das die erste Stelle, die ihr überprüfen solltet.

Überblick

Wert	Bezugspunkt	Aus dem Flow entfernt?	Scrollt mit?
static (Standard)	-	nein	ja
relative	eigene ursprüngliche Position	nein (Lücke bleibt)	ja
absolute	nächster positionierter Vorfahre	ja	ja (mit dem Vorfahren)
fixed	Viewport	ja	nein
sticky	Container, dann Viewport	nein, bis Schwelle erreicht	teilweise

z-index: wer liegt oben?

Sobald Elemente sich überlappen (typisch bei absolute/fixed/sticky), entscheidet z-index, welches darüber liegt:

.modal-backdrop {
  position: fixed;
  inset: 0; /* Kurzform für top/right/bottom/left: 0 */
  z-index: 10;
}

.modal {
  position: fixed;
  z-index: 20; /* höherer Wert = weiter oben */
}

• z-index wirkt nur auf Elemente mit position ≠ static
• Höherer Wert = näher am Betrachter, liegt über Elementen mit niedrigerem Wert
• Ohne z-index entscheidet die Reihenfolge im HTML (später im Code = weiter oben)

Tipp

Der abgedunkelte Hintergrund eines Modals lässt sich genau mit dem rgb(0 0 0 / 0.6)-Trick aus dem Farben-Kapitel bauen. Kombiniert mit position: fixed und z-index ergibt das einen kompletten Modal-Backdrop.