我应该了解有关 z-index 的任何奇怪规则吗？

抱歉，我无法发布完整的代码，我正在研究专有的东西。基本上，我遇到一个问题，即 z 索引为 6 的 DIV 被 z 索引为 5 的覆盖 DIV 阻塞。是否有任何情况会导致这种情况发生？我正在绞尽脑汁试图找出为什么会发生这种情况。这根本没有任何意义。与嵌套 DIV 或 CSS 有关的任何内容position maybe?

对于我的含糊之处，我深表歉意。我尝试在 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 索引为 6，并且覆盖层为 5，覆盖层仍然位于该框上方。

覆盖层应该覆盖窗口，但让其中一个盒子穿过。

为什么这个 JSFiddle 可以工作，但我的实际代码却不能？！http://jsfiddle.net/csaltyj/2gzTc/ http://jsfiddle.net/csaltyj/2gzTc/

z-index只适用于元素position: relative,absolute, or fixed。这似乎让很多人绊倒。

此外，孩子永远不能低于其父母。这个例子 http://dabblet.com/gist/2048472，也于Jsfiddle http://jsfiddle.net/Du8Qf/说明了这一点。

根据您添加的示例，很明显您遇到的问题：

z-index仅相对于其父级，在大多数情况下是文档本身。如果z-index一个兄弟姐妹的地位低于另一个兄弟姐妹，你对第一个兄弟姐妹的孩子所做的任何改变都不能将其移动到其父母兄弟姐妹之上。阅读更多关于如果你有兴趣的话。

这是一个视觉效果：

用红色划掉的是你想要做的事情，而 CSS 是不可能的（考虑到那些小盒子是大盒子的子元素，其标记可能如下所示：

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

解决方案是将“覆盖层”移动到墙内，或者更好地使用伪元素（它被渲染为它所应用到的元素的子元素），因为覆盖层听起来像是一些演示性的东西，因此应该保留在 CSS 领域，如果覆盖 div 不会添加任何语义含义。