How to Make a Sticky Header in CSS

position: sticky keeps the element in the document flow until it reaches the specified offset (like top: 0), then it becomes fixed. position: fixed immediately removes the element from the document flow and positions it relative to the viewport. Sticky is usually better because it doesn't require adding padding to compensate for the removed element.

The most common reasons are: 1) A parent element has overflow: hidden or overflow: auto, which breaks sticky positioning. 2) You forgot to add a top, bottom, left, or right value. 3) The parent container doesn't have enough height for the sticky element to scroll within. Check your ancestor elements for overflow properties and ensure top: 0 is set.

For a pure CSS solution, you can use scroll-driven animations (in supported browsers) or always show the shadow. For JavaScript, add an event listener to the scroll event and toggle a class when scrollY > 0. The class can add box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) to the header.

Use z-index: 50 to z-index: 100 for sticky headers. This is high enough to stay above most content but leaves room for modals and overlays (which typically use z-index: 1000+). Tailwind uses z-50 as a common value for headers.

Apply position: sticky directly to the header element, not to wrapper elements. If your header is inside a wrapper, make sure the wrapper doesn't have overflow: hidden. You can also use position: sticky on just the nav element inside the header if that's what you want to stick.