Kādas īpašības jūs zināt par pozīcijas: sticky īpašību?

position: sticky – tas ir position: relative un position: fixed hibrīds.

• Noklusējuma uzvedība: Elements uzvedas kā position: relative, paliekot parastajā dokumenta plūsmā.
• Lai slīdētu: Kad elements sasniedz noteiktu nobīdi (piemēram, top: 0) attiecībā uz savu slīdēšanas konteineru vai skatāmo zonu (scrollport), tas "pielīp" un uzvedas kā position: fixed, paliekot redzams šajā pozīcijā, turpinot slīdēt.
• Nobīde: Nobīde tiek noteikta ar top, right, bottom, left īpašībām. Lai sticky darbotos pareizi, ir jāizmanto vismaz viena no šīm īpašībām.
• Slīdēšanas konteineris (scroll container/containing block): Elements "pielīp" savam vecāku formatēšanas blokam (containing block), kas parasti sakrīt ar tuvāko vecāku, kuram ir slīdēšanas iespēja vai noteikts formatēšanas konteksts. Ja tiek slīdēts tikai body/html, tad pielīpība būs attiecībā uz skatāmo zonu.
• Pārklāšanās: Pielīpējis elements var pārklāt zemāk esošo saturu, līdzīgi kā position: fixed.
• Z-indekss: Uz pārklāšanos ietekmē z-index īpašība.
• Ierobežojumi:
  • Nestrādā, ja vecāku elements ir ar overflow: hidden, overflow: auto vai overflow: scroll, kas sagriež saturu.
  • Elements var "atslīdēt" vai "atslēgties", sasniedzot sava slīdēšanas konteineru malu.
• Izmantošana: Bieži tiek izmantots, lai izveidotu "lipīgas" galvenes tabulām, navigācijas panelus vai sānu elementus, kas paliek redzami, slīdējot galveno saturu.

/* Piemērs lietošanai */
.sticky-header {
  position: sticky;
  top: 0; /* Pielīp pie skrolēšanas konteineru vai skatāmo zonu */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Nodrošina, ka galvene ir virs cita satura */
}