Position: sticky xususiyatining qanday xususiyatlarini bilasiz?

position: sticky – bu, position: relative va position: fixed ning aralashmasi.

• Standart xulq: Element position: relative kabi xulq yuritadi va hujjat oqimida qoladi.
• Qaytib ko‘rish: Element belgilangan siljish (masalan, top: 0) ga erishganda, u "yapışadi" va position: fixed kabi xulq yuritadi, bu holatda ko‘rinishda qoladi.
• Siljish: top, right, bottom, left xususiyatlari bilan belgilangan. To‘g‘ri ishlashi uchun kamida birini ishlatish kerak.
• Skroll konteyneri (scroll container/containing block): Element o‘z ota-ona blokining chegaralarida (containing block) "yapışadi", bu odatda eng yaqin skroll qilish imkoniyatiga ega bo‘lgan yoki formatlash kontekstiga ega bo‘lgan ajdodga mos keladi. Agar faqat body/html skroll qilinsa, yopishish ko‘rinish maydoniga nisbatan bo‘ladi.
• Qoplash: Yopishgan element, ostidagi mazmunni qoplay oladi, position: fixed bilan o‘xshash.
• Z-indeks: Qoplash xulqi z-index xususiyati bilan ta'sir qiladi.
• Cheklovlar:
  • Agar ota-ona elementda overflow: hidden, overflow: auto yoki overflow: scroll bo‘lsa, ishlamaydi, chunki mazmun kesiladi.
  • Element skroll konteynerining chetiga yetganda, "yapışish" tugashi mumkin.
• Foydalanish: Ko‘pincha, jadval sarlavhalari, navigatsiya panellari yoki yon elementlar uchun ishlatiladi, ular skrollashda ham ko‘rinishda qoladi.

/* Foydalanish misoli */
.sticky-header {
  position: sticky;
  top: 0; /* Skroll maydonining yoki konteynerning yuqori qismiga yopishadi */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Sarlavhani boshqa mazmundan yuqoriga chiqaradi */
}