Hey. It's been a while. In the past week, I have been working on my new project (Wuhuu, you will hear more about it in a sooner future) heavily. In this weekly update, I will mainly record a tricky problem I faced and felt so confused on.
The problem is the
position: sticky property in CSS. This issue has a lot of answered posts on StackOverflow, but I still could not find a proper solution after a 30-minute search. In general, I understand that the problem could be caused by the
overflow property, but I did not set this behavior to the parent container of my sticky component, which has the
position: relative CSS property. It is not working even when I manually set
overflow: visible to this parent container.
So everything becomes so strange. All answers on the internet are pointing the same thing out, but none of their solution works for me. Other than that, I feel so frustrated because I may only set
overflow-x: hidden to the root container of my app, not
overflow-y at all, and my sticky direction will be vertical, so it does not make sense to my brain model.
The thing is even funnier that the
sticky property works on all of my previous projects, so it turns out to be an interesting issue – I made something not fine in my new architecture (with a lot of strict providers).
After comparing the CSS styles line by line between my old projects and the current project, turning styles on and off, I eventually find out the issue: one of my strict layout provider (nearly at the root) constrain the overflow horizontally. It is far away from where I was building the sticky, but it turns out that all parents of the sticky component should not set any overflow property other than
The original stylesheet of this layout provider was:
overflow-x: hidden; overflow-y: auto;
The original purpose was to make the layout not-scrollable horizontally and scrollable vertically. I found that keeping any of them makes
sticky not working.
This trick really changes my brain model of CSS overflow: even the
overflow-y: auto will affect the sticky style. But yeah actually, I should not apply this style on a layout that does not have a fixed height as it will originally be scrollable.
Finally, the stylesheet turns be this:
sticky is not working, the problem may not be on the direct parent only – all parents (even the
body ) of this component may affect its behavior if they have an
How tricky it is.