position: sticky ni mseto: kipengele hutenda kama relative (hubaki kwenye mtiririko wa kawaida) hadi kinapojiviringisha kufikia kizingiti unachobainisha, kisha hutenda kama fixed (hubaki mahali pake) — lakini tu wakati containing block yake bado iko skrini.
{
: sticky;
: ;
}
Thamani ya top (au bottom/left/right) inahitajika — hufafanua kizingiti. Bila yake, sticky haifanyi chochote.
Kipengele cha sticky kimefungwa kwa container ya mzazi. Hubaki wakati wa kujiviringisha kupitia mzazi huyo, kisha hujiviringisha mbali mara chini ya mzazi kinapopita. Hii ndiyo inayofanya "sticky section headers" zifanye kazi — kila header hubaki tu wakati sehemu yake yenyewe iko machoni.
1. Babu fulani ana overflow: hidden/auto/scroll. Hii ndiyo sababu nambari 1. Uwekaji wa sticky huvunjwa na babu yeyote anayeweza kujiviringisha, kwa sababu kipengele hubaki kwa uhusiano na container hiyo ya kujiviringisha, si ukurasa:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Mzazi si mrefu vya kutosha. Sticky ina nafasi ya kubaki tu ikiwa mzazi ni mrefu kuliko kipengele cha sticky — ikiwa mzazi ana urefu sawa, hakuna cha kujiviringisha kupitia, hivyo haionekani kamwe kubaki.
3. Hakuna kizingiti kilichowekwa. Kusahau top/bottom humaanisha hakuna sehemu ya kubaki.
4. Vikwazo vya urefu kwa mzazi (k.m. flex parent inayonyoosha vipengele) pia vinaweza kuondoa nafasi ya kujiviringisha.
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
position: sticky huendesha sticky headers, table headers, sidebars, na UIs za "scrollspy" bila JavaScript.
Lakini tabia zake za kipekee — hasa kwamba overflow kwa babu yeyote huivunja kimya — humfanya kuwa chanzo cha mara kwa mara cha utatuzi wa "kwa nini hii haibaki?".
Kujua upeo wa containing-block na mtego wa overflow ndiko kunakokuwezesha kuitumia kwa uhakika.