Loading…
28
I thought z-index bugs were just lazy coding, then I spent 3 hours on a mobile menu in Columbus
Last week I was building a sticky nav for a bakery site in Columbus and my dropdown kept hiding behind the hero image, so I kept bumping the z-index from 10 to 999 to 99999 and nothing worked. Turns out the hero had a transform on it, which made its own stacking context, so no number would ever fix it and I had to move the nav outside that wrapper instead. Is there a trick you all use to spot stacking contexts before you waste a whole afternoon fighting one?
1 comments
Log in to join the discussion
Log In1 Comment
paigewood16h ago
Wasted almost the same three hours on a client site last month fighting a modal that kept vanishing under a header. Bumped the z-index on that thing so many times I lost count, felt like a total fool when I finally opened dev tools and saw the parent had a filter on it. That filter did the exact same thing your transform did and made its own stacking context, so my giant numbers never had a chance. Now I literally scan the parent chain for transform, filter, opacity under 1, and position fixed before I even touch the z-index. Takes two minutes and has saved me so many afternoons. Your bakery story makes me feel way less alone in this.
4