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

Question

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

我为模糊而道歉.我试图在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.这似乎让许多人绊倒了.

此外,孩子永远不会低于其父母.这个例子也在Jsfiddle上说明了这一点.

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

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不会添加语义含义.