Fixierte und sticky Positionierung
Fixieren Sie Elemente am Viewport oder erstellen Sie beim Scrollen haftende Kopf- und Seitenleisten.
Fixierte und sticky Positionierung ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
position: fixed
Ein fixiertes Element wird relativ zum Browser-Viewport positioniert und bleibt an seiner Stelle, auch wenn die Seite gescrollt wird. Es wird ebenfalls aus dem Dokumentfluss entfernt.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Einsatzmöglichkeiten der fixierten Positionierung
Häufige Verwendungen von position: fixed:
- Navigationsleisten, die oben stehen bleiben
- Schwebende Aktionsschaltflächen (FABs)
- Chat-Widgets unten rechts
- Banner zur Cookie-Einwilligung
- Modal-Overlays
Ausgleich für fixierte Header
Fixierte Header überlagern den darunterliegenden Inhalt. Fügen Sie ein oberes Padding oder Margin hinzu, das der Höhe des Headers entspricht, um den Inhalt nach unten zu verschieben:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Transformierte übergeordnete Elemente und fixed
Eine wichtige Besonderheit: Wenn auf ein übergeordnetes Element ein CSS-transform, perspective oder filter angewendet wird, wird die fixierte Positionierung relativ zu diesem übergeordneten Element statt zum Viewport. Das ist ein häufiger Fehler.
position: sticky
position: sticky ist eine Kombination aus zwei Verhalten: Das Element scrollt zunächst normal, bis es einen festgelegten Schwellenwert (z. B. top: 0) erreicht, und bleibt dann innerhalb seines übergeordneten Containers an dieser Stelle stehen.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
Sticky benötigt einen scrollbaren übergeordneten Container
Das Sticky-Element bleibt innerhalb seines Containing Blocks an seiner Position. Wenn der übergeordnete Container nicht hoch genug zum Scrollen ist, hat Sticky keine Wirkung. Für den übergeordneten Container darf overflow nicht auf hidden gesetzt sein.
Top Right Bottom Left für sticky
Sie müssen mindestens einen Offset definieren, damit Sticky aktiviert wird. Häufige Muster:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Sticky-Tabellenheader
Sticky eignet sich perfekt für Tabellenheader in scrollbaren Tabellencontainern – der Header bleibt sichtbar, während die Nutzer durch die Zeilen scrollen.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Muster für eine Sticky-Seitenleiste
Eine klassische Sticky-Seitenleiste, die sichtbar bleibt, während der Hauptinhalt gescrollt wird:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Zusammenfassung: Fixed und Sticky
Wichtige Unterschiede:
- Fixed: immer relativ zum Viewport, immer außerhalb des Flusses
- Sticky: scrollt bis zum Schwellenwert mit dem Inhalt, bleibt im Fluss und endet an der Grenze des übergeordneten Containers
Performance: Fixed und Ebenen
Fixierte Elemente erstellen einen neuen Stacking Context und können beim Scrollen ein Layout auslösen, wenn sie Bereiche überlagern, die neu gezeichnet werden. Halten Sie fixierte Elemente einfach und vermeiden Sie aufwendige Eigenschaften wie box-shadow.
Kurzer Check
Welche Einschränkung hat position: sticky, die position: fixed nicht hat?
Zusammenfassung
position: fixed verankert Elemente am Viewport und eignet sich für Sticky-Navigationen und Overlays. position: sticky scrollt zunächst normal, bis ein Schwellenwert erreicht ist, und bleibt dann an seiner Position – ideal für Tabellenheader und Seitenleisten. Beide benötigen mindestens eine Offset-Eigenschaft, damit das Anheften aktiviert wird.
Häufig gestellte Fragen
Ist die Lektion „Fixierte und sticky Positionierung“ kostenlos?
Ja — der vollständige Text von „Fixierte und sticky Positionierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Fixierte und sticky Positionierung“?
Fixieren Sie Elemente am Viewport oder erstellen Sie beim Scrollen haftende Kopf- und Seitenleisten. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Fixierte und sticky Positionierung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Statische und relative Positionierung
- Absolute Positionierung und Containing Block
- Fixierte und sticky Positionierung
- Z-Index und Stacking Context