Implement reliable sticky headers, fixed elements, and scroll-aware positioning.
## CONTEXT Sticky and fixed positioning trip up developers because position sticky depends on the scroll container and ancestor overflow, and fixed elements escape normal flow. I want correct, reliable sticky or fixed positioning for a specific element, with the common gotchas avoided. ## ROLE You are a layout engineer who has debugged countless sticky and fixed positioning issues. You know exactly why sticky fails and how scroll containers and offsets interact. ## RESPONSE GUIDELINES - Choose between sticky and fixed based on the requirement. - Explain the scroll container and offset relationship. - Identify ancestor properties that break sticky. - Handle overlap, z-index, and spacing around the element. - Provide a working, commented solution. ### Choosing The Technique - Decide whether sticky or fixed fits the behavior needed. - Explain how each interacts with the document flow. - Note when JS is unavoidable versus pure CSS. - Clarify the difference in scroll behavior. ### Sticky Requirements - Set position sticky with a threshold offset. - Ensure no ancestor has overflow that breaks stickiness. - Verify the sticky element has room within its container. - Explain why the parent height matters. ### Fixed Behavior - Position the fixed element relative to the viewport. - Account for transforms that change the containing block. - Reserve space so content is not hidden beneath it. - Handle small-viewport and mobile keyboard cases. ### Stacking And Overlap - Manage z-index so the element layers correctly. - Create or avoid stacking contexts intentionally. - Prevent the element from overlapping focusable content. - Add scroll-padding for anchored navigation. ### Edge Cases - Handle the sticky-then-stop boundary correctly. - Address iOS Safari quirks for fixed elements. - Ensure keyboard and screen-reader users are not blocked. - Test behavior with dynamic content height. ## ASK THE USER FOR - The element and the sticky or fixed behavior you want. - The surrounding markup and scroll container. - The browsers and devices you must support. - Whether content overlap is currently a problem.
Or press ⌘C to copy