0

I am trying to figure out why a child element does not appear behind its parent element when given a lower z-index value than the parent. It only appears to work when you do not touch the parent's default z-index value.

Here's a basic example.

HTML:

<div class="a">
    A DIV
    <div class="b">
        B DIV
    </div>
</div>

CSS:

.a {
    position: relative;
    background: #eaeaea;
    height: 200px;
    width: 200px;
    z-index: 20;
}
.b {
    position: relative;
    z-index: -20;
    background: #d6d6d6;
    height: 100px;
    width: 100px;
}

Link to example: http://jsfiddle.net/V4786/2/

Any thoughts would be appreciated.

4

2 回答 2

1

仅当您不触摸父级的默认 z-index 值时，它似乎才起作用。

这是因为在定位元素上设置z-index为默认值以外的其他值auto会导致它建立一个新的堆叠上下文，并且一个元素不能定位在创建它所在的堆叠上下文的元素后面。（一个元素不能定位在根后面例如，如Scotty C.所述，堆叠上下文。）

当您z-index保持父元素的 保持不变时，父元素和子元素都参与同一个堆叠上下文，这是由根元素或根堆叠上下文建立的。这就是为什么在这种情况下您可以将孩子放在父母后面的原因。

所有详细信息都可以在spec中找到，但鉴于您的问题，这就是它的要点。

于 2013-11-12T05:30:37.050 回答
1

因为 Z-Index 水平是相对于他们的父母。这与说“如果我设置负 Z-Index，为什么元素不显示在浏览器窗口后面？”是一样的。通常，如果您要对关卡做一些时髦的事情，您可能会考虑使用两个具有绝对或相对定位的兄弟元素。尽管这种方法有时被认为是“hacky”。

于 2013-11-12T03:03:02.447 回答