z-index inherits parents z-index , or not?

Question

I have two absolute divs. One item on div A will show div B (on click + some javascript code). I want to have a higher Zindex on B than on A. (I want B above A)-

Thi

Answer 1

No, it isn't inherited. You can see it in MDN article.

However, be aware that z-index sets the z-position relatively to the stacking context. And a positioned element with non auto z-index will create an stacking context.

That means that if you have

    




#a, #b, #c { position: absolute; top: 0 }
#a { z-index: 1; }
#b { z-index: 1000000; }
#c { z-index: 2; }

Then, #c will overlap #b, even though #b has higher z-index.

Therefore, z-index is not technically inherited, but z-index of ancestors does affect z-position.

I suggest reading What No One Told You About Z-Index