Milyen jellemzőit ismer a position: sticky tulajdonságnak?

position: sticky – ez egy hibrid a position: relative és a position: fixed között.

• Alapértelmezett viselkedés: Az elem úgy viselkedik, mint a position: relative, és a dokumentum normál áramlásában marad.
• ** Görgetés közben:** Amikor az elem eléri a meghatározott eltolást (például top: 0) a görgetési konténeréhez vagy a látható területhez (viewport), "ragad" és úgy viselkedik, mint a position: fixed, és ezen a pozíción marad, miközben tovább görgetünk.
• Elmozdulás: A top, right, bottom, left tulajdonságokkal van beállítva. Legalább egy ilyen tulajdonság használata szükséges a sticky helyes működéséhez.
• Görgetési konténer (scroll container/containing block): Az elem "ragad" a szülő blokk (containing block) határain belül, ami általában a legközelebbi görgetési lehetőséggel rendelkező vagy meghatározott formázási kontextusú előd. Ha csak a body/html görget, akkor a láthatósági területhez viszonyítva ragad.
• Átfedés: A ragadó elem átfedheti az alatta lévő tartalmat, hasonlóan a position: fixed-hez.
• Z-index: Az átfedés viselkedését a z-index tulajdonság befolyásolja.
• Korlátozások:
  • Nem működik, ha a szülő elem overflow: hidden, overflow: auto vagy overflow: scroll-t tartalmaz, amelyek levágják a tartalmat.
  • Az elem "elbomolhat", ha eléri a görgetési konténer szélét.
• Használat: Gyakran alkalmazzák "ragadós" fejléc létrehozására táblázatokban, navigációs panelekben vagy oldalsó elemekben, amelyek a fő tartalom görgetése közben is láthatóak maradnak.

/* Használati példa */
.sticky-header {
  position: sticky;
  top: 0; /* A görgetési terület vagy konténer tetejéhez ragad */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Biztosítja, hogy a fejléc a többi tartalom felett legyen */
}