position: sticky and the ancestor overflow that kills it

It works in isolation, does nothing in the real page, and the cause is almost always an ancestor rather than the element itself.

.sidebar { position: sticky; top: 1rem; }

/* any of these on an ancestor disables it: */
/*   overflow: hidden | auto | scroll        */
/*   the parent being shorter than the element */
/*   a flex parent with align-items: stretch and no explicit height */

/* and the debugging one-liner in the console: */
/* $$('*').filter(el => getComputedStyle(el).overflow !== 'visible') */

The overflow rule is what catches everyone, because overflow: hidden gets applied casually to clear floats or hide a scrollbar and there is no warning that it disables sticky positioning three levels down. Sticky is also constrained to its parent, so an element stops moving where its container ends — which reads as a bug and is the specification. Debugging means walking up the tree rather than adjusting the element.