Shoutout to the devs who forget to set z-index on sticky headers

I keep seeing this bug on so many sites lately. You scroll down a page and the sticky header just disappears behind a random image or a floating chat widget. It's like someone wrote all the CSS but forgot the last step of giving the header a proper z-index value. I noticed it last night on a recipe blog where the nav bar was completely hidden behind a giant photo of a cake. Makes the whole site feel broken even if everything else works fine. I bet it's happening because people are stacking elements with absolute positioning and not thinking about the header. Has anyone else run into this on a site they built or visited? Feels like such an easy thing to catch before pushing live.

2 comments

2 Comments

taylor_moore3d agoMost Upvoted

Honestly this is one of those bugs that drives me crazy because it's so preventable if you just think through your stacking context. Tbh I've seen it happen even on big name sites too, not just small blogs. Like that time I was trying to read a news article and the sticky header was completely hidden behind a sticky sidebar ad that had a higher z-index. It just makes the whole experience feel sloppy and unfinished. So here's my question for you - when you catch this bug in your own code, do you usually just bump up the z-index number until it works, or do you actually check if there's a stacking context issue somewhere deeper in the CSS?

bailey.xena3d ago

Is it just me or does every sticky header eventually turn into a game of CSS roulette? Like, I remember coding a site for a client's bakery and the header kept hiding behind a floating "order now" button because someone set that button's z-index to 999 because they were too lazy to fix an actual layout bug. So I just bumped my header to 1000 and called it a day. Real professional move, right?