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.
Top comments (0)