CSS property z-index not working

#css #bug #zindex #beginners

It is never easy for me to use z-index especially when you are adding code to an existing project, and you don’t know the whole structure. I was stuck with that for a while, adding z-index on every level of div, but nothing was working.

Thanks to StackOverflow, I was able to understand the problem:
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed;). There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Source Stackoverflow

However, there is something else you need to know: when an element has an opacity value less than 1, even with a z-index of a million it won’t work. So if your z-index is not working, check the opacity of your element. You can read a detailed article about that following this link.

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →