Sidebar-Layouts: top, bottom, z-index und iOS-Bugs
position:sticky ist konzeptuell einfach — in der Praxis versagt es jedoch aus überraschend vielen Gründen. Dieser Artikel erklärt jeden einzelnen Fallstrick: overflow-Fallen im Elternelement, fehlende Schwellenwert-Properties, z-index in Stacking Contexts und warum iOS-Safari sich anders verhält.
Inhaltsverzeichnis
- 1. Das Grundprinzip von position:sticky
- 2. Drei Voraussetzungen, die alle erfüllt sein müssen
- 3. Die overflow-Falle: häufigste Ursache für sticky-Versagen
- 4. top vs. bottom sticky — Unterschied und Anwendungsfälle
- 5. Sticky in Scroll-Containern
- 6. z-index und Stacking Contexts bei sticky Elementen
- 7. iOS Safari: bekannte sticky-Bugs und Workarounds
- 8. sticky-Layouts im Vergleich
- 9. Sticky debuggen: Checkliste und Browser DevTools
- 10. Zusammenfassung
- 11. FAQ