css - 为什么负 z-index 在 Firefox 中隐藏元素，但在 Chrome/Safari 中没有

Question

<div class="parent">
   <div class="child">DIV which will be hidden in Firefox</div>
</div>

CSS:

.parent {
    width: 100%;
    position: fixed;
    bottom: 0px;
    height: 28px;
    border-top: 1px solid grey;
    background: #fff;
}

.child {
    position: absolute;
    width: 68%;
    background: greenyellow;
    left: 200px;
    z-index: -1;
}

在上面的代码中，子元素有一个 z-index的 -1 .此元素在 Chrome/Safari 中可见，但在 Firefox 中不可见。为什么？哪个行为正确？

Fiddle link

Answer 1

这称为 stacking context .如您所见，如果元素具有 position: fixed，则该元素将获得堆栈索引。 .并且一旦元素具有堆栈索引，负数 z-index他们的 child 将不是 隐藏它们。所以我会说 Firefox 呈现错误，但老实说，我对此并不完全确定。

Here is an article关于 Chrome，它说:

In Chrome 22 the layout behavior of position:fixed elements is slightly different than previous versions. All position:fixed elements now form new stacking contexts.

并且:

The original version of this article suggested that the CSS z-index specification had already been changed to reflect the new behavior of position: fixed elements. This is inaccurate; it has been discussed on the www-style list but as of yet no change has been taken into the spec.

所以，实际上它看起来像 火狐是对的目前，但规范可能会很快改变。