CSS-Position-Visualisierer
position: static, relative, absolute, fixed und sticky live ausprobieren: Abstände, Bezugselement und Scrollverhalten sichtbar machen.
Der CSS-Position-Visualisierer zeigt, wie sich position: static, relative, absolute, fixed und sticky verhalten. Du stellst top, right, bottom, left und z-index ein, schaltest das positionierte Elternelement an oder aus und scrollst in der Vorschau, um fixed und sticky zu erleben. Zu jedem Wert gibt es eine kurze Erklärung und den passenden Code.
position: absolute – Das Element verlässt den Fluss, die Nachbarn rücken nach. Es richtet sich am nächsten positionierten Vorfahren aus, sonst am Dokument.
.parent {
position: relative;
}
.element {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
}Die fünf position-Werte
| Wert | Im Fluss? | Bezugspunkt | Typischer Einsatz |
|---|---|---|---|
static | Ja | – | Standard |
relative | Ja | Eigene Position | Bezug für Kinder, kleine Verschiebungen |
absolute | Nein | Positionierter Vorfahr | Badges, Overlays, Tooltips |
fixed | Nein | Bildschirm | Cookie-Banner, Chat-Buttons |
sticky | Ja | Scroll-Container | Tabellenköpfe, Navigation |
Elemente zentrieren zeigt CSS zentrieren, Seitengerüste der CSS-Layout-Generator.
Häufige Fragen
Woran richtet sich position: absolute aus?
Am nächsten Vorfahren, dessen position nicht static ist. Fehlt ein solcher, dient der Anfangsbereich des Dokuments als Bezug. Deshalb bekommt das Elternelement meist position: relative.
Warum funktioniert sticky nicht?
Die häufigsten Gründe: Es fehlt ein Abstand wie top: 0, ein Vorfahr hat overflow: hidden oder auto, oder das Elternelement ist nicht höher als das Element selbst. Sticky haftet nur innerhalb seines Elternelements.
Warum ist fixed manchmal nicht am Bildschirm fixiert?
Hat ein Vorfahr transform, filter, perspective oder contain, wird er zum Bezug für fixed. Das Element scrollt dann mit diesem Vorfahren mit.
Wann wirkt z-index?
Nur bei positionierten Elementen (alles außer static) sowie bei Flex- und Grid-Kindern. Zudem bilden manche Eigenschaften wie opacity unter 1 oder transform eigene Stapelkontexte, aus denen ein z-index nicht herausreicht.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.