Why is z-index not working?

I have a modal that needs to sit on top of everything, but no matter how high I set the z-index (even 999999), it stays behind the header. I've checked the positions, and they seem fine. What specific CSS context creates a new stacking order that might be trapping my element?

All 2 comments

Zeeshan Saleem

It's almost always a "stacking context" issue. If your parent element has transform, filter, or opacity set to anything other than default, it creates a new local stacking context. Your z-index of 999999 is only relative to that parent, not the whole page.

Zeeshan Saleem

Wow, I never knew opacity caused that! I just checked and my container had opacity: 0.99 for an animation. Removing that fixed it immediately. Thanks!

Why is z-index not working?