CSS-position-Eigenschaft Generator
Schalte per GUI zwischen den 5 CSS-position-Werten (static, relative, absolute, fixed, sticky) um, sieh dir in einer Live-Vorschau die Wirkung von top/right/bottom/left und z-index an und generiere kostenlos den passenden CSS-Code.
Tipps
- Wechsle zu position: relative und setze top/left, um Box B optisch von ihrer ursprünglichen Position zu verschieben — beachte, dass sich Box C (das nachfolgende Element) dabei überhaupt nicht bewegt.
- Wechselst du 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 — ändere erst position, bevor du „z-index festlegen“ testest.
- position: sticky funktioniert nur innerhalb eines scrollbaren Containers. Scrolle den Vorschaukasten selbst, um zu sehen, wie das Element unterwegs einrastet.
- Der generierte CSS-Code lässt sich direkt in dein eigenes Stylesheet kopieren — probiere ihn auf einer echten Seite aus, um zu prüfen, ob er gleich aussieht.
Häufig gestellte Fragen
Ü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.