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

You can use a client-side debugger like Firefox's Firebug to check the computed styles:

Answer 2

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

Answer 3

you say:

absolute divs

EDIT

from w3.org spec

absolute

Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).

Visual formatting model

he order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes. Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order. The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks.

Anyway, as already mentioned, you can test z-index of your div by

window.getComputedStyle(element)