Position Sticky stops working, after I set a sibling element to Position Absolute
this is the structure.
header is position relative. .header__links is set to position: sticky because i want it to stick on top of my page. Things are working fine so far. But when I set nav to position: absolute, the sticky element stops working like it should.6 Replies
The sticky sticks to the nearest parent with position relative or absolute, so it's working as described in the spec
I'm not changing the parent. Its relative all the time. Its only when I make the sibling nav absolute when it stops working.
disabled absolute and sticky is working again.
Any chance you could share the working version with us?
My thinking is, the position absolute is pulling that element out of the flow so the links move up. If you have white background on them, it's just hiding that behind the links.
I made a really basic example here, and it's still working for me, but you can see how the list goes on top of the thing with position absolute on it https://codepen.io/kevinpowell/pen/rNbOwxE?editors=1100
I've copied the code in this codepen, the problem is on the mobile view, when menu is opened. https://codepen.io/rafaaay/pen/xxewrLZ
Ah, I get it now.
The problem is, the
position: sticky is on your .header__links... which is going to "stick" to the header.
Even now on the larger viewport, the links will scroll away once you scroll enough. Same with if you turn position: absolute off. It will stick for a little, but it then scrolls away.
Position sticky doesn't stick to the viewport, it sticks to it's parent element. When you position: absolute the nav, the header's height is defined by the links section, so it just scrolls off with it. When you turn off position: absolute, it goes back into the flow, so the height of the entire header is bigger... now, as you scroll, it sticks to the header, until the bottom of the header scrolls out of view.
If you move the position sticky directly to the header it should solve the issue