Positionierung: relative, absolute, fixed, sticky, z-index

Verankere Badges, Kopfzeilen und Modals genau dort, wo du sie haben willst, mit CSS-Positionen und einer gut verwalteten z-index-Skala.

8 Min. · 3 Fragen

Standardmäßig ist jedes Element position: static und folgt dem Dokumentenfluss. position: relative hat zwei Zwecke: ein Element leicht zu verschieben, ohne seine Nachbarn zu stören, und vor allem als Bezugspunkt zu dienen für Kinder mit position: absolute. Es ist das häufigste Positionierungsmuster: ein Promo-Badge, ein Tooltip oder ein Icon, das in einer Ecke seines Elternelements verankert ist.

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed heftet ein Element an den Viewport, unabhängig vom Scrollen: Cookie-Banner, Zurück-nach-oben-Schaltfläche. position: sticky ist ein Hybrid: Das Element scrollt normal mit der Seite mit und rastet dann ein, sobald es die Schwelle erreicht, die du festlegst (zum Beispiel top: 0). Es ist die moderne Lösung für Kopfzeilen, die sichtbar bleiben.

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

Wenn sich Elemente überlappen, entscheidet z-index, welches obenauf liegt - aber nur bei positionierten Elementen. Verwende eine dokumentierte Skala statt zufälliger Werte: 10 für Dropdown-Menüs, 100 für die Kopfzeile, 1000 für Modals. Achtung: Ein Elternelement, das seinen eigenen Stapelkontext erzeugt (zum Beispiel mit einer opacity unter 1), begrenzt den z-index all seiner Kinder.

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Relativ wozu positioniert sich ein position: absolute-Element?
   • Immer relativ zum Browserfenster
   • Relativ zum nächsten positionierten Vorfahren, sonst zum Viewport
   • Relativ zu seinem direkten Elternelement, egal welche Position es hat
2. Was ist der Unterschied zwischen fixed und sticky?
   • fixed bleibt immer am Bildschirm geheftet, sticky rastet erst ab einer Scroll-Schwelle ein
   • sticky rendert schneller als fixed
   • Keiner, sie sind Synonyme
3. Warum kann ein z-index: 999 wirkungslos bleiben?
   • Weil der höchste erlaubte Wert 100 ist
   • Weil das Element nicht positioniert ist oder in einem niedrigeren Stapelkontext gefangen ist
   • Weil z-index nur mit Grid funktioniert