Tried to float a modal with z-index 99999 and it still hid behind a sticky header

Was debugging a client's site for a solid 2 hours yesterday. Their big old modal popup kept hiding behind a stupid sticky nav bar. I kept bumping the z-index up higher and higher thinking it would fix it. Then my coworker walking by said 'check if the parent has its own stacking context' and man that hit me right in the gut. Why do we always go straight for the biggest number instead of looking at the real problem?

2 comments

2 Comments

alice_gonzalez965d ago

And right there with you, had almost the exact same thing happen with a login modal last month. Kept cranking that z-index up to like 999999 thinking I was being clever. Turns out the sticky header had a transform: translateZ(0) on it from some bootstrap thing, and that created its own stacking context. My face just dropped when I finally spotted it in dev tools. I swear half my debugging time is just me fighting with stacking contexts I didn't even know existed. It's always something small and dumb like that.

alice_barnes355d ago

The transform thing really is the sneakiest trap in all of css. @alice_gonzelle96 I feel you on those bootstrap defaults that just layer on stacking contexts without you even realizing it. Had one the other week where a full screen overlay just would not cover a fixed header and it ended up being some will-change: transform that some plugin added automatically. We just assume a high number will win but stacking contexts don't care about number size at all. Dev tools and the layer visualization thing is basically my best friend at this point.