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将不隐藏它们。 ~~所以我说Firefox出错了，但说实话，我对此并不完全确定。~~

关于Chrome的

Here is an article，其中说：

在Chrome 22中，position：fixed元素的布局行为与以前的版本略有不同。所有位置：固定元素现在形成新的堆叠上下文。

还有：

本文的原始版本表明CSS z-index规范已经被更改以反映position：fixed elements的新行为。这是不准确的;它已在www风格列表中进行了讨论，但截至目前尚未对规范进行任何更改。

所以，实际上它目前看起来像 Firefox是对的，但规格很快就会改变。

Answer 2

查看specification in CSS 2.1表明它实际上应该可见：

每个框属于一个堆叠上下文。

将z-index设置为整数...

[...]该框还会建立一个新的堆叠上下文。

和

根元素形成根堆叠上下文。

换句话说，您的.child因此会直接位于根堆叠上下文中，因为.parent没有定义明确的z-index。

在每个堆叠上下文中，以下按顺序绘制以下图层：


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

[...]

因此，可能隐藏具有负索引的元素的唯一元素将位于DOM树的相同级别或更远处。

但如果您在z-index: 0上设置.parent，则会显示，因此根堆叠上下文似乎在Firefox中表现不正确。

Answer 3

当你给perent DIV背景颜色和孩子z-index = -1时，孩子被设置在父白色背景之后。

check running example [JSFiddle][1]

为什么负z-index会隐藏Firefox中的元素，而不会隐藏在Chrome / Safari中

3 个答案: