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'

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'

• javascript
• css

• 2 How about posting some code? – j08691 Commented Apr 28, 2014 at 19:19

3 Answers 3

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

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

I can't do it I have a Z-INDEX 1 photo carousel widget and above it a Z-INDEX 2 image And I want to take an element out of the first widget and put it above the image. And it does not work.