关于z-index的任何奇怪规则我应该知道吗？

Question

抱歉，我无法发布完整的代码，我正在研究专有的东西。基本上我有一个问题，其中具有z-index 6的DIV被具有z-index为5的覆盖DIV阻止。是否有任何情况会导致这种情况发生？我正在试图弄清楚为什么会发生这种情况。它没有任何意义。可能与嵌套DIV或CSS position有什么关系？

我为模糊而道歉。我试图在JSFiddle中重新创建但不幸的是它按预期工作。只有实际的代码是不可能的。

结构：

<div id="window">
    <div id="wall">
        <div class="box" /><div class="box" /> .... many boxes
    </div>
</div>
<div id="overlay" />

CSS：

#window {
    position: relative;
    width: 960px;
    height: 700px;
    overflow: hidden;
    background: #666;
}

#wall {
    position: relative;
    width: 1640px;
    height: 1600px;
    -webkit-perspective: 2000;
}

#overlay {
    position: absolute;
    z-index: 5;
    background: #000;
}

.box {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 228px;
    height: 228px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    -webkit-transform-style: preserve-3d;
    z-index: 4;
    cursor: pointer;
}

在特定事件中通过jQuery设置叠加尺寸：

        $('<div id="overlay"></div>').css({
            'left': $('#window').position().left + 'px',
            'top': $('#window').position().top + 'px',
            'width': $('#window').width() + 'px',
            'height': $('#window').height() + 'px',
            'opacity': 0.8
        }).appendTo('body');

即使其中一个方框的z-index为6，且叠加层为5，叠加层仍然在所述方框上方。

叠加层应该越过窗口，但让其中一个框通过。

为什么这个JSFiddle工作但是我的实际代码没有？！ http://jsfiddle.net/csaltyj/2gzTc/

Answer 1

z-index仅适用于position: relative，absolute或fixed的元素。这似乎让许多人绊倒了。

此外，孩子永远不会低于其父母。 This example也在Jsfiddle上说明了这一点。

根据您添加的示例，您可以清楚地看到问题：

z-index仅与其父级相关，在大多数情况下，它是文档本身。如果一个兄弟姐妹的z-index低于另一个兄弟姐妹，那么你对第一个兄弟姐妹的孩子所做的任何改变都不能超过其父母的兄弟姐妹。如果您有兴趣，请详细了解stacking context。

这是一个视觉效果：

红色交叉是你想要做的事情，用CSS不可能（考虑到那些小盒子是较大盒子的孩子，标记可能看起来像这样：

<div class="one">
</div>
<div class="two">
     <div> I can never be above "one", if my parent "two" isn't. </div>
</div>

解决方案是将“叠加”移动到墙内，或者更好地使用伪元素（渲染为应用元素的子元素），因为叠加层听起来像是表现形式的东西，并且因此，如果叠加div不会增加语义含义，则应保留在CSS的域中。