Why `position: sticky` doesn't work

The sticky hasn't a threshold

The sticky needs a specified threshold with at least one of top, right, bottom, or left.

The sticky hasn't enough space

A parent must be larger than its sticky. Check sizes by Devtools. Maybe the parent has no other children and has fitted the sticky. Maybe the sticky is a flexbox and it grows up for all parent's height.

The parent of the sticky has overflow: hidden, or one of the grandparents

Any non-visible value of overflow on the parent anchors the sticky to the parent's context. Then only a parent's scrolling causes the sticky. And a window's scrolling doesn't.

Comments

[Aashrith Katukuri]

one correction it works's if the overflow is set to 'clip'. see github.com/w3c/csswg-drafts/issues...