position:fixed problem
So I have a grid, 1fr 1fr 1fr and i want the first grid position fixed. But other grids start overlapping when I change the position. Is there a way to work around that?
13 Replies
The element is removed from the normal document flow, and no space is created for the element in the page layout.āhttps://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed If you want it to be in the normal document flow,
position: fixed; is the wrong tool for the job.So what might be the best way to achieve it?
I want the middle fr to be scrollable and the rest to be fixed. I've been trying to search documents or any article related to this issue. But I cannot find any.
What do you mean by "fixed"? With grid the grid elements are fixed to that location. If you mean "fixed" as in "fixed width" then set a specific width instead of
1fr (which is a variable-width declaration)Okay. Let me make a codepen. Then it might be easy to understand. And thank you for looking into this and helping.
š
So if you can check this link. I do not want the scrollable content to come on top of hello buddy. But i want the position fixed for hello buddy div
position: sticky ftw šYou'll notice in there I had to add
align-items: start to the .grid. If not, the one you want to not scroll has a height that matches the other side, and it doesn't work, so we need that along with the change to stickyThanks. I can't believe you replied on this post. Can I put a screen shot of this on my linkedin?
& I actually got a job without any college degree, thanks to you and your content. š
Haha, sure, np about screen shotting it š
Congrats on the job! š
Thanks Kevin