Position Sticky stops working, after I set a sibling element to Position Absolute

<header>
<div class="logo"></div>
<div class="header__links"></div>
<nav class="nav"></nav>
<header>
<header>
<div class="logo"></div>
<div class="header__links"></div>
<nav class="nav"></nav>
<header>
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.
J
Jochem44d ago
The sticky sticks to the nearest parent with position relative or absolute, so it's working as described in the spec
F
feanor44d ago
I'm not changing the parent. Its relative all the time. Its only when I make the sibling nav absolute when it stops working.
No description
F
feanor44d ago
disabled absolute and sticky is working again.
No description
KP
Kevin Powell44d ago
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
F
feanor44d ago
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
KP
Kevin Powell44d ago
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
Want results from more Discord servers?
Add your server
More Posts
question regarding "key" in jsIk this might seem a lil dumb but can someone explain to me why we use "key" in js or react as wellEven/odd row styling with CSS Grid and subgrid, is this a good idea?For work, I needed some table styling and decided to use CSS Grid. Because I need even/odd row stylihow to prevent last item of flex to grow```css section {display:flex; flex-wrap:wrap; gap:1rem} div {background-color:red; width:0; min-widtResponsive IdeasHello there! Thank you in advance for your help. I've been working on a Weather API that I need to fIssue in starting sassFirst off, i have exisiting .css file doing some mini project of mine then i encountered limitation Button coloring with a imaged backgroundIt's proving quite difficult to find the right color to make this not look out of place/tacky.. I tHelp me, help you, by helping me, so I don't ask so many questions(yep?)Here's the site: https://anglian-online.netlify.app/ Here's the code: https://github.com/callum-lainFor some reason the post value isn't being shown even tho in var_dump it shows that it's there.You can see that the `$_POST["ajaxMonth"]` has a string value of "2" in the first image however whenResponsive Carousel (TailWind + JS)Hello, I'm trying to build a responsive carousel. Ideally, what I'd like to happen is that the amouWebpage CSS to make it be better on varying display size (responsive)tell me where to start how to fix this , where to study this ,on varying display somethings get stacIs my site layout saveable?Two years ago I made a custom layout for my website. At a small scale it worked perfectly (only one simulating support for missing web apis?Is there a way to simulate *the lack of support* for web apis in Firefox or Chrome? Like for exampleGoogle search result name changeChanged the domain name recently from infotelligent to selling.com. I have changed the all the titlePGJDBC IssueHello, I'm trying to setup PostgreSQL JDBC Driver with my Java project. I'm not using Maven, don't If anyone can help and look at my Html & CSSI'm trying this challenge and just wanted some help on my code and what I can improve on and avoid. Applying multiple classes, or targetting a google font class in NextJSAnyone know how to do this? I've got the font working on my h1, but I don't know how to target it.