The Weird Parts of position: sticky;

"Using position: sticky; is one of those CSS features that's incredibly useful, seemingly simple, and also, frequently frustrating. The premise is simple: you want to be able to scroll your page's content, but you want something to "stick" at the top (or anywhere). Frequently, this will be some sort of header content that you want to always stay at the top, even as the user scrolls, but it could be any sort of content (and stick edges other than the top, and at any offset)."

"This may seem like a simple feature, but in practice it frequently goes wrong, and figuring out why can be maddening. Googling "position sticky doesn't work" will produce a ton of results, the vast majority of which telling you to make sure you don't have any containers between your sticky element and your scroll container with overflow: hidden; set. This is true: if you do that, sticky positioning won't work."

position: sticky allows an element to become fixed relative to its scroll container once it reaches a specified offset, enabling headers or other content to "stick" during scrolling. Using a utility like top-0 sets the sticky positioning and the offset simultaneously. Common failures include ancestor elements with overflow: hidden, which break the sticky behavior, and flex container children defaulting to stretch, which can interfere with expected sticky layout. Other CSS contexts such as transformed or positioned ancestors can also prevent sticking. Demonstrating examples with Tailwind provides concise combined markup and styling for testing and diagnosing sticky problems.

Read at Frontendmasters