Kaum eine CSS-Eigenschaft sorgt für so viel Verwirrung wie position. Ein Header, der nicht klebt, ein Button, der an der falschen Stelle schwebt, oder ein Overlay, das hinter dem Inhalt verschwindet: Fast immer steckt ein Missverständnis über den Bezugspunkt dahinter. Dieser Ratgeber erklärt die fünf möglichen Werte, woran sich jeder einzelne orientiert und welche Stolpersteine dich in der Praxis am häufigsten ausbremsen.
Was die Eigenschaft position überhaupt steuert
Standardmäßig fließen alle Elemente im sogenannten normalen Dokumentfluss von oben nach unten und von links nach rechts. Die Eigenschaft position bestimmt, ob ein Element in diesem Fluss bleibt oder herausgelöst wird, und worauf sich die Verschiebungswerte top, right, bottom und left beziehen. Ohne ein passendes position haben diese vier Werte schlicht keine Wirkung. Genau dieser Bezugspunkt ist der Schlüssel zum Verständnis: Jeder der fünf Werte misst seine Abstände gegen etwas anderes.
Die fünf Werte und ihr Bezugspunkt
Es gibt fünf relevante Werte. Sie unterscheiden sich vor allem darin, ob das Element im Fluss bleibt und gegen welchen Container es sich ausrichtet.
- static ist die Voreinstellung. Das Element bleibt im normalen Fluss,
topund Co. werden ignoriert. Auch einz-indexbleibt wirkungslos. - relative hält den ursprünglichen Platz im Fluss, verschiebt das Element aber optisch relativ zu seiner eigenen Ausgangslage. Wichtig: Der freigewordene Raum bleibt reserviert.
- absolute löst das Element komplett aus dem Fluss. Es orientiert sich am nächsten positionierten Vorfahren, also dem nächsten Elternelement mit einem
positionungleichstatic. Gibt es keinen, wird der initiale Block (in der Praxis das Browserfenster) zum Bezug. - fixed löst das Element ebenfalls aus dem Fluss und richtet es am Viewport aus, also am sichtbaren Fensterbereich. Beim Scrollen bleibt es an Ort und Stelle.
- sticky ist ein Hybrid. Das Element verhält sich zunächst wie
relativeund wechselt erst bei Erreichen eines Schwellenwerts in ein klebendes Verhalten innerhalb seines Scroll-Containers.
Übersicht: Bezugspunkt, Scroll-Verhalten und Einsatzzweck
Die folgende Tabelle fasst zusammen, wogegen jeder Wert misst, wie er sich beim Scrollen verhält und wofür er typischerweise gut ist.
| Wert | Bezugspunkt | Im Dokumentfluss? | Reaktion auf Scrollen | Typischer Einsatzzweck |
|---|---|---|---|---|
static |
kein Bezug (normaler Fluss) | ja | scrollt mit dem Inhalt | Standardverhalten aller Elemente |
relative |
eigene Ausgangsposition | ja (Platz bleibt reserviert) | scrollt mit dem Inhalt | kleine Korrekturen, Anker für absolute Kinder |
absolute |
nächster positionierter Vorfahre | nein | scrollt mit dem Eltern-Container | Badges, Tooltips, exakt platzierte Elemente |
fixed |
Viewport (Fenster) | nein | bleibt fest stehen | schwebender Button, Cookie-Leiste, Modal |
sticky |
Scroll-Container + Schwellenwert | ja, bis zum Schwellenwert | klebt ab Schwelle, dann wieder frei | klebriger Header, Tabellenkopf, Seitenleiste |
sticky richtig einsetzen
Der Wert sticky ist mächtig, aber pingelig. Damit er funktioniert, müssen zwei Bedingungen erfüllt sein. Erstens braucht das Element einen Schwellenwert, also mindestens eine Angabe wie top: 0 oder bottom: 0. Ohne diese Schwelle weiß der Browser nicht, ab wann das Element kleben soll, und es bleibt schlicht im normalen Fluss.
Zweitens klebt das Element nur innerhalb seines eigenen Eltern-Containers. Sobald das Ende des Containers durchscrollt ist, scrollt das vermeintlich klebrige Element wieder mit hinaus. Das überrascht viele: Eine sticky Seitenleiste bleibt nur so lange stehen, wie ihr umgebender Bereich sichtbar ist. Ein typisches Muster sieht so aus:
.kopf {
position: sticky;
top: 0;
background: #fff;
}Der häufigste Stolperstein: overflow beim Elternelement
Wenn sticky einfach nicht funktioniert, obwohl alles richtig aussieht, liegt es überraschend oft an einem Vorfahren mit overflow: hidden, overflow: auto oder overflow: scroll. Ein solcher Eltern-Container erzeugt einen eigenen Scroll-Kontext, und das sticky Element bezieht sich dann auf diesen statt auf den erwarteten äußeren Bereich. In vielen Fällen wirkt es dadurch, als ob das Kleben gar nicht greift.
Praktische Hinweise, um dem Problem auf die Spur zu kommen:
- Prüfe alle Vorfahren bis zum
bodyauf eineoverflow-Angabe ungleichvisible. - Achte darauf, dass kein Eltern-Container eine zu geringe Höhe hat, sodass kein scrollbarer Bereich entsteht.
- Stelle sicher, dass ein Schwellenwert wie
topwirklich gesetzt ist.
Z-Index gilt nur für positionierte Elemente
Ein weiterer Klassiker: Ein Overlay verschwindet hinter dem Inhalt, obwohl ein hoher z-index gesetzt ist. Der Grund ist simpel. Die Eigenschaft z-index wirkt ausschließlich auf Elemente, die positioniert sind, also einen Wert ungleich static haben. Setzt du z-index: 9999 auf ein statisches Element, passiert nichts. Erst zusammen mit relative, absolute, fixed oder sticky entfaltet er seine Wirkung. Zudem entstehen durch Eigenschaften wie opacity oder transform neue Stapelkontexte, die das Verhalten zusätzlich beeinflussen können.
Praxisbeispiele aus dem Alltag
Drei wiederkehrende Aufgaben lassen sich den Werten direkt zuordnen:
- Klebriger Header: Eine Navigationsleiste, die beim Scrollen oben hängen bleibt, ist der Paradefall für
position: sticky; top: 0;. Sie bleibt im Fluss, bis sie den oberen Rand erreicht. - Schwebender Button: Ein Aktionsknopf unten rechts, der immer sichtbar bleibt, gehört zu
position: fixedmitbottomundright. Da er am Viewport hängt, ignoriert er das Scrollen vollständig. - Modales Overlay: Ein Dialog, der den ganzen Bildschirm abdeckt, kombiniert
position: fixedmittop: 0; left: 0; right: 0; bottom: 0;und einem ausreichendenz-index, damit er über allem liegt.
Ein häufiges Tandem ist außerdem relative am Elternelement plus absolute am Kind. So platzierst du etwa ein kleines Statusabzeichen exakt in der Ecke einer Karte, ohne dass es aus seinem Bereich ausbricht.
Schnelle Entscheidungshilfe
Wenn du unsicher bist, hilft eine einfache Frage: Woran soll sich das Element ausrichten? Geht es um das Fenster, das immer sichtbar bleibt, ist fixed richtig. Geht es um einen Bereich, in dem etwas bis zu einer Schwelle kleben soll, ist es sticky. Geht es um die exakte Platzierung innerhalb eines Eltern-Containers, kombinierst du relative am Elternteil mit absolute am Kind. Für reine Feinkorrekturen am eigenen Platz reicht oft relative. Mehr Werkzeuge rund um Webentwicklung findest du übrigens in den kotsch.tech Webtools.
Häufige Fragen
Warum funktioniert position: sticky bei mir nicht?
Meist fehlt entweder ein Schwellenwert wie top: 0, oder ein Vorfahren-Element besitzt eine overflow-Angabe ungleich visible. Beides verhindert das Kleben. Prüfe die Elternkette bis zum body und stelle sicher, dass ein scrollbarer Bereich existiert.
Was ist der Unterschied zwischen fixed und sticky?
Ein fixed Element hängt fest am Viewport und bewegt sich beim Scrollen nie. Ein sticky Element scrollt zunächst normal mit und bleibt erst ab dem Schwellenwert stehen, allerdings nur innerhalb seines eigenen Containers.
Warum wirkt mein z-index nicht?
Der z-index beeinflusst ausschließlich positionierte Elemente. Hat dein Element noch den Standardwert static, bleibt der z-index ohne Effekt. Setze zusätzlich einen Wert wie relative oder absolute.
Bleibt bei position: relative der ursprüngliche Platz erhalten?
Ja. Anders als bei absolute oder fixed reserviert relative den ursprünglichen Raum im Layout. Die optische Verschiebung wirkt sich also nicht auf die Position der Nachbarelemente aus.
Worauf bezieht sich ein absolut positioniertes Element?
Auf den nächsten Vorfahren mit einem position ungleich static. Existiert kein solcher Vorfahre, dient der initiale Block, also faktisch das Browserfenster, als Bezugspunkt. Deshalb setzt man häufig position: relative am gewünschten Eltern-Container.
Kann ein Element gleichzeitig sticky und fixed sein?
Nein, ein Element kann immer nur einen position-Wert haben. Du kannst jedoch je nach Bildschirmgröße über Media Queries unterschiedliche Werte vergeben, etwa mobil fixed und am Desktop sticky. Weitere Tipps rund um Webentwicklung sammeln wir laufend in den News.