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)-

This item has its own zindex (lower than div A zindex). I thouhgt than zindex was inheritated by childrens from parents , but it seems it doesn't.

The question is ...? How can I get the 'computed' zindex for my 'item'

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

<div id="a">
    <div id="b"></div>
</div>
<div id="c"></div>

#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