The day I realized I had been using z-index completely backwards for years

I was fighting with a sticky header and a dropdown menu for like 4 hours. Nothing I tried would get the dropdown to show on top. I had z-index: 9999 on it and everything. My buddy came over to grab a beer and saw me cursing at my monitor. He just pointed at my screen and said 'dude, stacking context is a thing.' I had no idea what he was talking about. Turns out I had put position: relative on one of the parent divs a few layers up and it was creating its own little world. All those times I just threw higher numbers at the problem and it worked sometimes, it was pure luck. Has anyone else spent years just guessing at z-index before actually learning how stacking contexts work?

2 comments

2 Comments

fiona_lewis3715d ago

Wait so your buddy just casually dropped that on you while grabbing a beer? That's WILD because I had almost the exact same thing happen but with a modal overlay. I was setting z-index on the modal itself and wondering why it kept disappearing behind the header. Turns out the header's parent had transform: scale(1) on it for some animation I never even used. That created a whole separate stacking context and my modal was trapped inside it. Did you ever figure out a quick way to spot when a parent is creating a stacking context without digging through every single stylesheet?

ericjackson14d ago

Oh man, that transform: scale(1) trap is evil. Ngl, the sneakiest one nobody talks about is will-change. Even if you set it to something like 'opacity' and never actually animate anything, it still creates a stacking context. I found that out the hard way after hours of debugging. The real trick I use now is just opening the browser's dev tools, right clicking the header or modal, and checking the 'Layers' tab in Chrome. It literally shows you every single stacking context and what caused it. No need to hunt through every stylesheet line by line. Honestly, that tool saved me from pulling my hair out over this exact problem.