我应该知道关于 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 域中。