CSS-position-Eigenschaft Generator

Schalten Sie per GUI zwischen den 5 CSS-position-Werten (static, relative, absolute, fixed, sticky) um, sehen Sie sich in einer Live-Vorschau die Wirkung von top/right/bottom/left und z-index an und generieren Sie kostenlos den passenden CSS-Code.

Zuletzt aktualisiert: 2026-09-20

Die fünf Werte von position vergleichen

`position` ist jene Eigenschaft, die bestimmt, wo ein Element sitzt, und sie nimmt fünf Werte an: `static`, `relative`, `absolute`, `fixed` und `sticky`. Dieses Werkzeug lässt Sie zwischen ihnen wechseln und dabei auf der Stelle bestätigen, wie sich `top`, `right`, `bottom`, `left` und `z-index` verhalten, um anschließend das CSS zu erzeugen.

**Landet ein mit `absolute` gesetztes Element an unerwarteter Stelle, so ist die Ursache fast immer dieselbe: Es wird gegen den nächsten Vorfahren gesetzt, dessen `position` nicht `static` ist.** Fehlt ein solcher Vorfahre, so greift das Element auf die Seite als Ganzes zurück. **Das `position: relative` am Elternelement zu vergessen** erklärt nahezu jeden Fall. **`sticky` hat eine eigene, wohlbekannte Falle: Ein `overflow: hidden` oder `overflow: auto` an irgendeiner Stelle der Vorfahren verhindert das Anhaften.** Und da `z-index` in eine verschachtelte Einheit namens Stapelkontext eingeschlossen ist, **kann ein Element in einem tiefer liegenden Kontext sich über ein anderes nicht erheben, wie groß der Wert auch sei.**

So gehen Sie vor

Wechseln Sie den Wert von position Alle fünf nacheinander zu erproben zeigt, worauf sich jeder jeweils bezieht.
Verschieben Sie die Versätze **Bestätigen Sie, dass `top` und seinesgleichen überhaupt nicht wirken, solange der Wert `static` lautet.**
Ändern Sie z-index Sie sehen, wie sich die Stapelreihenfolge verschiebt.
Kopieren Sie das erzeugte CSS Sitzt es wie beabsichtigt, lässt es sich unmittelbar in Ihren Quelltext einfügen.

Tipps für die Nutzung

Wechseln Sie zu position: relative und setzen Sie top/left, um Box B optisch von ihrer ursprünglichen Position zu verschieben — beachten Sie, dass sich Box C (das nachfolgende Element) dabei überhaupt nicht bewegt.
Wechseln Sie zu absolute oder fixed, wird Box B vollständig aus dem normalen Fluss herausgenommen, sodass Box C nach oben rückt und die entstandene Lücke füllt.
z-index bestimmt die Stapelreihenfolge sich überlappender Elemente, wirkt sich bei position: static jedoch überhaupt nicht aus — ändern Sie erst position, bevor Sie „z-index festlegen“ testen.
position: sticky funktioniert nur innerhalb eines scrollbaren Containers. Scrollen Sie den Vorschaukasten selbst, um zu sehen, wie das Element unterwegs einrastet.
Der generierte CSS-Code lässt sich direkt in Ihr eigenes Stylesheet kopieren — probieren Sie ihn auf einer echten Seite aus, um zu prüfen, ob er gleich aussieht.

Wofür Sie es nutzen können

Um eine Überschrift am oberen Rand festzuhalten

**Mit `sticky` bleibt die Überschrift stehen, während die Seite rollt.**

Um ein Abzeichen oder Symbol in eine Ecke zu legen

`relative` am Eltern- und `absolute` am Kindelement ist das Grundmuster.

Um eine feste Schaltfläche zu setzen

`fixed` bezieht sich auf das Sichtfeld, weshalb es beim Rollen der Seite nicht mitwandert.

Um ein Stapelproblem zu untersuchen

**Verschwindet ein Element unter einem anderen, ist ein Stapelkontext das Erste, was zu verdächtigen ist.**

Begriffe zu position

Static: Der Anfangswert. **Solange er gilt, wirken weder die Versätze wie `top` noch `z-index`.**
Relative: Verschiebt das Element **von jener Stelle aus, an der es sonst stünde.** Es wandert, doch der ursprüngliche Platz bleibt freigehalten.
Absolute: **Setzt gegen den nächsten Vorfahren, dessen `position` nicht `static` ist.** Fehlt dieser, so dient die Seite als Ganzes.
Fixed: Setzt gegen das Sichtfeld, sodass das Element stehen bleibt, wie weit die Seite auch rollt.
Sticky: Sitzt an gewöhnlicher Stelle, bis ein angegebener Versatz erreicht ist, und haftet dann an. **Ein `overflow` an einem Vorfahren verhindert das Wirken.**
Stapelkontext: Die verschachtelte Einheit, in der die Stapelreihenfolge entschieden wird. **Ein `z-index` darin lässt sich mit Elementen außerhalb nicht unmittelbar vergleichen.**

Häufig gestellte Fragen

absolute wird relativ zum nächstgelegenen positionierten Vorfahren positioniert (dem nächsten Elternelement, dessen position nicht static ist); gibt es keinen, dient letztlich der anfängliche Containing Block der Seite als Bezug. fixed wird hingegen immer relativ zum Viewport des Browsers positioniert, sodass es beim Scrollen der Seite an derselben Stelle auf dem Bildschirm bleibt.

Die häufigsten Ursachen sind ein Elternelement mit overflow: hidden oder overflow: auto, ein Elternelement, dessen Höhe kaum größer ist als die des sticky-Elements selbst (sodass kein Platz zum Einrasten bleibt), oder schlicht ein fehlender Versatz wie top. Außerdem wirkt sticky nur innerhalb des übergeordneten Containers, der also tatsächlich als scrollbarer Bereich angelegt sein muss.

relative verschiebt ein Element optisch ausgehend von der Position, die es als normales, statisches Element eingenommen hätte — entsprechend den eingestellten Werten für top/right/bottom/left. Entscheidend ist, dass der ursprünglich belegte Platz im Layout weiterhin reserviert bleibt — das ist der große Unterschied zu absolute, bei dem das Element vollständig aus dem Fluss entfernt wird.

z-index wirkt sich nur auf Elemente aus, die nicht position: static sind (also relative, absolute, fixed oder sticky). Zudem verhält es sich unerwartet, wenn ein Elternelement einen eigenen Stacking-Context erzeugt — etwa durch transform oder opacity zusammen mit position —, weil der z-index der Kindelemente dann nur innerhalb dieses Kontexts gilt.

Der übliche Trick ist, dem gewünschten Bezugselement position: relative hinzuzufügen. Dabei müssen nicht einmal Versatzwerte gesetzt werden: Allein position: relative macht es zu einem „positionierten Element“, sodass jedes absolut positionierte Nachfahrenelement relativ zu dessen Innenkanten platziert wird.

Übrigens – Der lange Weg zur Standardisierung von position: sticky

CSS kennt static, relative, absolute und fixed schon seit seinen Anfängen, doch für eine Kopfzeile oder Seitenleiste, die erst nach einem bestimmten Scroll-Punkt einrastet, musste man lange Zeit Scroll-Events per JavaScript beobachten und manuell zu position: fixed umschalten. Eine Möglichkeit, dieses Verhalten allein mit CSS auszudrücken, gab es nicht.

Die Idee hinter position: sticky wurde bereits um 2012 in der Spezifikation CSS Positioned Layout Module Level 3 vorgeschlagen, erwies sich aber als schwierig gut umzusetzen. Safari lieferte um 2013 eine frühe, herstellerpräfixierte Version (-webkit-sticky), Chrome unterstützte das Standard-Schlüsselwort sticky erst ab 2017, und erst um 2020 konnten sich alle großen Browser, einschließlich Firefox, zuverlässig darauf verlassen.

Technisch lässt sich das „rastet unterwegs beim Scrollen ein“-Verhalten von sticky am besten als Hybrid aus relative und fixed beschreiben: Normalerweise verhält sich das Element wie relative, sobald die Scrollposition den angegebenen Versatz erreicht, verhält es sich wie fixed. Dieser Wechsel tritt nur innerhalb des Scrollbereichs des Elternelements auf — genau deshalb wirkt sticky so oft, als würde es „nicht funktionieren“, wenn overflow oder Höhe des Elternelements im Weg stehen.

Heute ist sticky eine feste Größe im Webdesign: die Kopfzeile einer Tabelle fixieren, ein Inhaltsverzeichnis beim Scrollen sichtbar halten und vieles mehr. Dass JavaScript-basiertes Scroll-Tracking überflüssig wurde, war sowohl für die Performance als auch für die Einfachheit des Codes ein echter Gewinn.

Alle Wissenstexte ansehen