z-index是否继承父z-index？

Question

我有两个绝对的div。 div A上的一个项目将显示div B（点击+一些javascript代码）。我希望B上的Zindex高于A.（我希望B高于A） -

此项目有自己的zindex（低于div A zindex）。 我比zindex由父母的孩子继承，但它似乎没有。

问题是......？我怎样才能得到＆＃39;计算＆＃39; zindex for my＆＃39; item＆＃39;

Answer 1

不，它不是继承的。您可以在MDN article中看到它。

但是，请注意z-index相对于堆叠上下文设置z位置。使用非auto z-index的定位元素将创建堆叠上下文。

这意味着，如果你有

<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; }

然后，#c将重叠#b，即使#b的{​​{1}}更高。

因此，z-index在技术上不是继承的，但祖先的z-index会影响z位置。

我建议阅读What No One Told You About Z-Index

Answer 2

你说：

  

绝对divs

修改

来自w3.org spec

  

绝对

     

仅适用于定位元素（position：absolute;，position：relative;或position：fixed;）。

Visual formatting model

  

根据堆叠上下文描述将渲染树绘制到画布上的顺序。堆叠上下文可以包含更多堆栈上下文。从其父堆栈上下文的角度来看，堆叠上下文是原子的;其他堆叠环境中的框可能不在其任何框之间。   每个框属于一个堆叠上下文。给定堆叠上下文中的每个定位框具有整数堆栈级别，这是其在z轴上相对于同一堆叠上下文中的其他堆栈级别的位置。具有更高堆栈级别的盒子总是在具有较低堆栈级别的盒子前面格式化。框可能具有负的堆栈级别。堆叠上下文中具有相同堆栈级别的框根据文档树顺序从后到前堆叠。   根元素形成根堆叠上下文。其他堆叠上下文由任何定位元素（包括相对定位的元素）生成，其具有计算值＆gt; z-index＆＃39;除了＆＃39; auto＆＃39;。堆叠上下文不一定与包含块有关。

无论如何，如前所述，您可以通过

测试div的z-index

window.getComputedStyle(element)

Answer 3

您可以使用像Firefox的Firebug这样的客户端调试程序来检查计算出的样式：