Welche Eigenschaften der Eigenschaft position: sticky kennen Sie?

position: sticky – ist eine Mischung aus position: relative und position: fixed.

• Standardverhalten: Das Element verhält sich wie bei position: relative und bleibt im normalen Dokumentenfluss.
• Beim Scrollen: Wenn das Element eine festgelegte Verschiebung (z.B. top: 0) relativ zu seinem Scroll-Container oder Sichtbereich (Viewport) erreicht, "klebt" es und verhält sich wie bei position: fixed, bleibt an dieser Position sichtbar beim weiteren Scrollen.
• Verschiebung: Wird durch die Eigenschaften top, right, bottom, left festgelegt. Es muss mindestens eine dieser Eigenschaften verwendet werden, damit sticky korrekt funktioniert.
• Scroll-Container (scroll container/containing block): Das Element "klebt" innerhalb seines Elternelements (containing block), das meist dem nächsten Vorfahren entspricht, der Scrollfähigkeit oder einem bestimmten Formatierungskontext hat. Wenn nur body/html gescrollt wird, erfolgt das "Kleben" relativ zum Sichtbereich.
• Überlappung: Das "klebrige" Element kann den Inhalt darunter überlappen, ähnlich wie bei position: fixed.
• Z-Index: Das Verhalten bei Überlappungen wird durch z-index beeinflusst.
• Einschränkungen:
  • Funktioniert nicht, wenn das Elternelement overflow: hidden, overflow: auto oder overflow: scroll hat, was den Inhalt abschneidet.
  • Das Element kann "abklettern", wenn es den Rand seines Scroll-Containers erreicht.
• Verwendung: Wird häufig für "klebrige" Kopfzeilen in Tabellen, Navigationsleisten oder seitliche Elemente genutzt, die beim Scrollen sichtbar bleiben.

/* Beispiel für die Verwendung */
.sticky-header {
  position: sticky;
  top: 0; /* Klebt am oberen Rand des Viewports oder Containers */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Stellt sicher, dass die Kopfzeile über anderem Inhalt liegt */
}