CSS position: relative, absolute, sticky und fixed

Die CSS-Eigenschaft position ist das zentrale Werkzeug, das festlegt, wie ein Element auf der Seite platziert wird und ob Versätze wie top, right, bottom, left (und inset) überhaupt auf es wirken. Die meiste Verwirrung entsteht, weil man nicht genau weiß, wie sich die fünf Werte (static, relative, absolute, fixed, sticky) voneinander unterscheiden. In diesem Artikel kläre ich jeden einzelnen mit echten Beispielen und funktionierendem Code.

position: static — das Standardverhalten

Jedes Element kommt standardmäßig mit position: static, sofern du nichts anderes angibst. Statische Elemente liegen im normalen Fluss: Blockelemente stapeln sich vertikal, Inline-Elemente reihen sich nebeneinander. Das wichtigste Detail: Versatz-Eigenschaften wie top und left haben keine Wirkung auf ein statisches Element. z-index ebenso wenig.

.box {
  position: static; /* Standard */
  top: 50px; /* keinerlei Wirkung */
}

Willst du ein Element verschieben, ist der erste Schritt also, es aus dem statischen Zustand herauszuholen.

position: relative — verschieben relativ zu sich selbst

relative hält das Element im normalen Fluss, lässt dich aber Versätze anwenden. Diese Versätze werden relativ zur ursprünglichen Position des Elements berechnet. Wichtig: Selbst wenn sich das Element verschiebt, bleibt sein ursprünglicher Platz im Fluss erhalten — benachbarte Elemente verhalten sich, als wäre es noch da, und es bleibt keine Lücke zurück.

.badge {
  position: relative;
  top: -8px;
  left: 12px;
}

Der zweite, ebenso häufige Einsatz von relative ist ein unsichtbarer: Es erzeugt einen Positionierungskontext für die absolute Elemente in seinem Inneren. Oft gibst du einer Box position: relative ganz ohne Versatz; dein einziges Ziel ist, ihre Kinder daran zu verankern.

position: absolute — aus dem Fluss heraus

absolute nimmt das Element vollständig aus dem normalen Fluss; es belegt für seine Nachbarn keinen Platz mehr. Seine Position wird vom nächstgelegenen positionierten Vorfahren aus berechnet (dem nächsten übergeordneten Element, dessen position nicht static ist). Gibt es keinen solchen Vorfahren, fällt die Referenz auf den initialen Containerblock zurück (meist der Viewport / <html>).

Das klassische Muster lautet: relative außen, absolute innen.

.karte {
  position: relative;
}
.karte .label {
  position: absolute;
  top: 8px;
  right: 8px;
}

Hier klebt .label an der oberen rechten Ecke der Karte. Ohne relative auf .karte würde das Label zum nächstgelegenen positionierten Vorfahren auf der Seite davonfliegen. Deshalb lautet die Antwort auf „mein absolute Element ist an der falschen Stelle" fast immer: Du hast vergessen, relative auf den richtigen Vorfahren zu setzen.

Setzt du sowohl top als auch bottom ohne Höhe, dehnt sich das Element vertikal.
Die Kurzform inset: 0 setzt alle vier Kanten auf 0 und dehnt das Element so, dass es seinen Vorfahren vollständig bedeckt.

position: fixed — am Viewport fixiert

fixed nimmt das Element ebenfalls aus dem Fluss, aber seine Referenz ist immer der Viewport (kein Vorfahre). Das Element bleibt auf dem Bildschirm an seiner Stelle, auch wenn die Seite scrollt. Ideal für feste Navigationsleisten, „Nach oben"-Buttons und Cookie-Banner.

.feedback {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
}

Eine entscheidende Ausnahme: Hat ein Vorfahre eine Eigenschaft wie transform, filter oder perspective, erzeugt dieser Vorfahre einen neuen Containerblock, und das fixed Element wird relativ zu diesem Vorfahren statt zum Viewport fixiert. Driftet ein fixed Element unerwartet weg, prüfe, ob ein übergeordnetes Element ein transform besitzt.

position: sticky — zwischen relative und fixed

sticky ist ein Hybrid aus beiden. Das Element liegt zunächst wie relative im normalen Fluss; sobald es beim Scrollen den von dir gesetzten Schwellenwert erreicht (z. B. top: 0), klebt es wie fixed fest. Am Ende seines Containers wird es wieder freigegeben.

.abschnitt-titel {
  position: sticky;
  top: 0;
  background: #fff;
}

Wenn sticky nicht funktioniert, gibt es drei übliche Ursachen:

Fehlender Schwellenwert: Du musst mindestens einen von top, bottom, left oder right angeben; ohne ihn klebt nichts.
overflow an einem Vorfahren: Hat ein übergeordnetes Element overflow: hidden/scroll/auto, bindet sich das sticky-Element an den Scroll-Kontext dieses Containers und verhält sich nicht wie erwartet.
Zu wenig Platz: Ein sticky-Element bleibt nur über die Länge seines eigenen Containers kleben; ist dieser kurz, hält der Effekt nur kurz an.

z-index und Stacking Contexts

z-index wirkt nur auf positionierte Elemente (jeder Wert außer static) und auf Flex-/Grid-Kinder. Ein höherer z-index bringt ein Element nach vorne — aber nur innerhalb desselben Stacking Context. Eigenschaften wie transform, opacity (unter 1) und filter erzeugen einen neuen Stacking Context; deshalb kann manchmal selbst z-index: 9999 ein Element nicht nach oben heben: Es ist in einem Kontext niedrigerer Priorität gefangen.

Welcher Wert, und wann?

Nur eine kleine Verschiebung bei erhaltenem Fluss? → relative
Ein Element in die Ecke eines anderen setzen? → relative auf dem Eltern-, absolute auf dem Kindelement
Soll es unabhängig vom Scrollen fest auf dem Bildschirm bleiben? → fixed
Soll es beim Scrollen kleben, am Abschnittsende aber loslassen? → sticky

Häufige Fragen

Was ist der Unterschied zwischen absolute und fixed?

Beide nehmen das Element aus dem normalen Fluss. absolute wird relativ zum nächstgelegenen positionierten Vorfahren platziert und scrollt mit der Seite; fixed wird relativ zum Viewport platziert und bleibt auf dem Bildschirm an seiner Stelle, auch beim Scrollen.

Warum klebt mein sticky-Element gar nicht?

Die zwei häufigsten Gründe: Du hast keinen Schwellenwert angegeben (wie top/bottom), oder ein übergeordnetes Element hat overflow: hidden oder overflow: auto. Letzteres deaktiviert sticky stillschweigend.

Warum funktioniert mein z-index nicht?

Meist, weil das Element static ist (gib ihm zuerst einen Positionswert) oder weil es in einem Stacking Context niedrigerer Priorität feststeckt. Prüfe die Vorfahren auf transform, opacity oder filter.

Bricht deine Oberfläche wegen der Positionierung? Wir können sticky Header, Dropdown-Überlappungen und Ebenenprobleme gemeinsam in Ordnung bringen. Wenn du ein Projekt hast, nimm Kontakt mit mir auf.