CSS Sticky Header optimization guide as Expected with Overflow Hidden on Parent Element
I can't seem to get I've looked through the documentation and I'm still confused about I'm trying to implement a sticky header that remains at the top of the viewport when scrolling, but I'm running into issues because the parent container has `overflow: hidden` set. I noticed that when I scroll, the header is not sticking as anticipated; it just scrolls out of view along with the rest of the content. I've tried various combinations of `position: sticky` and `top: 0`, but nothing seems to work. Here's a simplified version of my setup: ```html <div class="container"> <header class="sticky-header">Sticky Header</header> <div class="content"> <p>Some content here...</p> <p>More content...</p> <p>Even more content...</p> <p>Keep adding content to cause scrolling...</p> </div> </div> ``` ```css .container { height: 100vh; overflow: hidden; } .sticky-header { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background: white; z-index: 1000; } .content { height: 150%; /* for testing overflow */ } ``` I've also considered removing the `overflow: hidden` from the parent, but that would lead to other layout issues I need to afford. Is there any workaround or best practice to achieve a sticky header in this scenario without changing the parent overflow property? Any help would be appreciated! I'm working on a service that needs to handle this. What's the best practice here? The project is a service built with Html/Css. Any suggestions would be helpful.