Why does position: sticky silently stop working?

A sticky column on one of my product pages had never once pinned. The CSS was right, the parent had a height, there was room to scroll — and it behaved exactly as if position: sticky had been ignored. It had not been ignored. It was working perfectly, against the wrong scroll container.

#The rule

position: sticky positions an element relative to its nearest scrolling ancestor. What makes an ancestor a scrolling ancestor is any overflow value other than visible — and that includes hidden.

So an ancestor with overflow: hidden becomes the container the sticky element sticks inside. That container does not scroll; it clips. The sticky child therefore has no scroll to respond to, and travels with the page like a static element.

#Finding the ancestor

Walk up from the sticky element and check the computed overflow of every ancestor, rather than reading the source and trusting your eyes. In Tailwind codebases the culprit is almost always an overflow-hidden added for an unrelated reason — a rounded corner clipping an image, or a decorative beam kept inside a card.

let el = $0;
while ((el = el.parentElement)) {
  const o = getComputedStyle(el).overflow;
  if (o !== "visible") console.log(o, el);
}

The first thing this prints is your scroll container. If it is not the element you expected to scroll, that is the bug.

#The fix, without losing the clip

Usually the overflow: hidden is there for a reason and cannot simply be deleted. The pattern that resolves both needs is to move the clip onto a wrapper around the thing being clipped, rather than leaving it on the shared ancestor.

// Before — the card clips, so nothing inside it can stick or escape.
<div className="relative overflow-hidden rounded-2xl">
  <SweepBeam />
  <aside className="sticky top-24">…</aside>
</div>

// After — only the decoration is clipped.
<div className="relative rounded-2xl">
  <div className="absolute inset-0 overflow-hidden rounded-2xl">
    <SweepBeam />
  </div>
  <aside className="sticky top-24">…</aside>
</div>

#The same rule eats straddling labels

Sticky is the famous casualty, but it is not the only one. Anything positioned to cross the clipping ancestor's boundary gets cut at that boundary — and again, silently.

I had two panels labelled with a legend at -top-[10px], deliberately straddling the card's own border. Both cards carried overflow-hidden for a decorative sweep. Nine pixels of a seventeen-pixel label were being clipped, and neither legend had ever rendered at all. The design had been wrong since the day it shipped and nobody had spotted it, because a partially clipped label just looks like a slightly odd label.

Measure rather than squint: put the offending rule back temporarily and compare the child's getBoundingClientRect().top against the clipping ancestor's. If the child's is smaller, it is being cut.

#The habit worth forming

When a sticky element does not pin, the instinct is to doubt the sticky element — add a height to the parent, try top: 0, check for display: flex. All of that is downstream of the actual question.

1. Check every ancestor's computed overflow first, before editing any CSS.
2. If one is clipping, ask whether the clip belongs on that element or on a wrapper inside it.
3. Only then look at the sticky element's own rules.