overflow: hidden on ancestor breaks position: sticky

A position: sticky element stops working after adding overflow: hidden to a parent container.

Find and remove overflow: hidden (or overflow: auto/scroll) from all ancestors of the sticky element. If clipping is needed for another reason, restructure the DOM:

/* BREAKS sticky */
.wrapper {
  overflow: hidden; /* clips the sticky child's scroll container */
}

.sticky-nav {
  position: sticky;
  top: 0; /* has no effect — overflow hidden is the culprit */
}

/* FIX: remove overflow hidden from wrapper, or wrap differently */
.outer-clip {
  /* use clip-path or a pseudo-element for visual clipping instead */
  clip-path: inset(0); /* clips visually but does not affect scroll container */
}

overflow: hidden (and auto/scroll) establishes a new scroll container. A sticky element positions itself relative to its nearest scrolling ancestor — when that ancestor is clipped, the sticky threshold is reached immediately and the element appears not to stick.

Sticky elements inside wrappers that use overflow: hidden for layout or aesthetic reasons.