Welke eigenschappen van de eigenschap position: sticky ken je?

position: sticky – is een hybride tussen position: relative en position: fixed.

• Standaard gedrag: Het element gedraagt zich als met position: relative, en blijft in de normale stroom van het document.
• Bij scrollen: Wanneer het element een bepaalde verschuiving bereikt (bijvoorbeeld top: 0) ten opzichte van zijn scrollcontainer of het zichtbare gebied (viewport), "plakt" het en gedraagt het zich als met position: fixed, en blijft het zichtbaar op die positie tijdens verder scrollen.
• Verschuiving: Wordt ingesteld door de eigenschappen top, right, bottom, left. Minimaal één van deze eigenschappen moet worden gebruikt voor correcte werking van sticky.
• Scrollcontainer (scroll container/containing block): Het element "plakt" binnen de grenzen van zijn ouderblok (containing block), dat meestal overeenkomt met de dichtstbijzijnde voorouder met scrollmogelijkheden of een bepaalde formatteringscontext. Als alleen body/html wordt gescrold, is de plakkracht relatief tot het zichtbare gebied.
• Overlapping: Het kleverige element kan onderliggende inhoud overlappen, vergelijkbaar met een element met position: fixed.
• Z-index: Het gedrag bij overlapping wordt beïnvloed door de eigenschap z-index.
• Beperkingen:
  • Het werkt niet als de oudercontainer overflow: hidden, overflow: auto of overflow: scroll heeft, die inhoud afsnijden.
  • Het element kan "loskomen" als het de rand van zijn scrollcontainer bereikt.
• Gebruik: Wordt vaak toegepast voor het maken van "kleverige" kopteksten in tabellen, navigatiepanelen of zij-elementen die zichtbaar blijven bij het scrollen.

/* Voorbeeld van gebruik */
.sticky-header {
  position: sticky;
  top: 0; /* Plakt aan de bovenkant van het viewport of container */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Zorgt dat de koptekst boven andere inhoud ligt */
}