Position: sticky xüsusiyyətinin hansı xüsusiyyətlərini bilirsiniz?

position: sticky – bu, position: relative və position: fixed-in qarışığıdır.

• Əsas davranış: Element position: relative kimi davranır və sənəd axışında qalır.
• Yeniləmə zamanı: Element müəyyən bir kənara (məsələn, top: 0) çatdıqda, o, "yapışır" və position: fixed kimi davranır, bu mövqedə görünməyə davam edir.
• Kənarlaşdırma: top, right, bottom, left xüsusiyyətləri ilə təyin olunur. sticky-in düzgün işləməsi üçün ən azı bir xüsusiyyət istifadə olunmalıdır.
• Skroll konteyneri (scroll container/containing block): Element, valideyn blokunun (containing block) sərhədləri daxilində "yapışır", bu, adətən ən yaxın skroll imkanına malik və ya müəyyən formatlama kontekstinə sahib olan öncülə uyğun gəlir. Əgər yalnız body/html skroll edirsə, yapışma görünüş sahəsinə görə olacaq.
• Üst-üstə düşmə: Yapışqan element, altındakı məzmunu üst-üstə qoya bilər, position: fixed kimi.
• Z-indeks: Üst-üstə düşmə davranışına z-index təsir edir.
• Məhdudiyyətlər:
  • Əgər valideyn element overflow: hidden, overflow: auto və ya overflow: scroll-a malikdirsə, işləməz, çünki məzmun kəsilir.
  • Element, skroll konteynerinin kənarına çatdıqda, "yapışma" sona çata bilər.
• İstifadə: Çox vaxt, cədvəllərin başlıqları, naviqasiya panelləri və ya yan elementlər üçün istifadə olunur, onlar skroll edilərkən görünür qalır.

/* İstifadə nümunəsi */
.sticky-header {
  position: sticky;
  top: 0; /* Görünüş sahəsinin və ya konteynerin yuxarı kənarına yapışır */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Başlığın digər məzmundan yuxarıda olmasını təmin edir */
}