z-index继承了父z-index，还是不继承？

Question

我有两个绝对的div。div A上的一项将显示div B(单击+一些javascript代码)。我希望B上的Z索引比A上的更高(我想让B高于A)-

该项有自己的zindex (低于div A zindex)。我以为zindex是由父母的孩子继承的，但似乎不是。

问题是...？如何获取我的“item”的“computed”zindex？

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具有更高的z-index。

因此，z-index在技术上不是遗传的，但祖先的z-index确实会影响z位置。

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

Answer 2

你可以说：

绝对div

编辑

来自w3.org spec

绝对

仅适用于定位的元素(位置:绝对；、位置:相对；或位置:固定；)。

Visual formatting model

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

无论如何，正如前面提到的，您可以通过以下方式测试div的z索引

window.getComputedStyle(element)

Answer 3

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

​