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. Diese Kopfzeile soll normal mitscrollen und dann am oberen Fensterrand hängen bleiben, sobald sie ihn erreicht. Welche Eigenschaft fehlt, um dieses Verhalten auszulösen?

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

   • top
   • bottom
   • margin-top
   • padding-top
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