DEV Community

Discussion on: One Line - Sticky Header using CSS

akhilarjun profile image
Akhil Arjun Author

Yeah but the whole point of using sticky is when we have a scrollable element. So if we have overflow hidden. We should always go for position:absolute

gsarig profile image
Giorgos Sarigiannidis • Edited on

A not so rare scenario of those two conflicting would be to have a container at the top of your DOM (e.g. right after the <body>) with an overflow: hidden; in order to avoid vertical scrollbars (caused by some burger menu or whatever). Then, deeper in the DOM you might want to have your sticky element.

In that scenario, you would need to either figure another way to get rid of the vertical scrollbars or use JavaScript to stick the element. It doesn't matter if the container only has its overflow-x set to hidden and not overflow-y; it will mess with the child element's position: sticky anyway.