When would you use position: sticky and what are constraints?

When would you use position: sticky and what are constraints?

• A. For headers that stay fixed to the top of the viewport during scroll.
• B. For headers that stay in view during scroll; requires a non-static ancestor and defined boundaries.
• C. For elements that should always be positioned relative to the document.
• D. For elements that should ignore scrolling.

Answer: (B)

Position: sticky is used when you want an element to scroll with the page until you reach a certain offset, then it sticks within the bounds of its nearest scrolling container. This is great for headers that should stay in view as you scroll, but only inside their section rather than across the entire document. The constraints matter: there needs to be a non-static ancestor that provides the containing block for the sticky element, and you must define an offset (like top: 0) so the browser knows when to switch from in-flow to fixed positioning. The sticky element will stay within the boundary of that containing block and won’t stick beyond it. If you want a header to stay fixed at the very top of the viewport regardless of its container, you’d use position: fixed instead.

Position: sticky is used when you want an element to scroll with the page until you reach a certain offset, then it sticks within the bounds of its nearest scrolling container. This is great for headers that should stay in view as you scroll, but only inside their section rather than across the entire document.

The constraints matter: there needs to be a non-static ancestor that provides the containing block for the sticky element, and you must define an offset (like top: 0) so the browser knows when to switch from in-flow to fixed positioning. The sticky element will stay within the boundary of that containing block and won’t stick beyond it. If you want a header to stay fixed at the very top of the viewport regardless of its container, you’d use position: fixed instead.