Gotcha: CSS position sticky not working

position: sticky doesn't seem to work - the element doesn't stick when scrolling.

Common reasons sticky fails and fixes:

/* 1. Missing top/bottom/left/right */
.sticky {
  position: sticky;
  /* MUST specify at least one: */
  top: 0;
}

/* 2. Parent has overflow: hidden/auto/scroll */
.parent {
  overflow: hidden; /* BREAKS sticky! */
  /* Fix: remove overflow or restructure HTML */
}

/* 3. Parent has no scrollable height */
.parent {
  /* Sticky element has nowhere to stick if parent
     is exactly the height of its content */
  height: 100%; /* or min-height */
}

/* 4. Any ancestor between sticky and scroll container
   has overflow set */
/* Check ALL ancestors up to the scroll container */

/* 5. Parent is a flex/grid item with align-items: stretch */
.flex-parent {
  display: flex;
  align-items: flex-start; /* Fix: don't stretch */
}

Debug checklist:

1. Is top (or bottom/left/right) set?
2. Does ANY ancestor have overflow: hidden/auto/scroll?
3. Does the sticky element's container have enough height?
4. Open DevTools > Elements > check computed styles for overflow on each ancestor

// Quick debug: find ancestors with overflow
let el = document.querySelector('.sticky');
while (el = el.parentElement) {
  const ov = getComputedStyle(el).overflow;
  if (ov !== 'visible') console.log(el, 'overflow:', ov);
}

position: sticky creates a sticking constraint relative to its nearest scrolling ancestor. Any overflow property on an intermediate ancestor creates a new scroll context that prevents sticking.

CSS layouts with sticky headers, sidebars, or navigation