Z-index 在固定位置元素内的绝对定位不符合预期

Question

我遇到过这样一种情况，页面上有 2 个或更多固定位置元素，显示一个在另一个之上（也就是说，第二个的顶部与第一个的底部相邻 -没有这些元素的 z-index 堆叠）。在第一个固定位置元素内部，有一个绝对定位元素，它比它的固定父元素高，所以它超出了那个固定父元素的底部。

问题是下一个固定位置元素会显示在绝对定位元素的顶部。我在绝对定位元素上设置了比固定定位元素更高的 z-index 值，但它被完全忽略了。

为了帮助澄清问题，我整理了这个例子：

HTML

<div class="fixed first">
    <p>This is a fixed element</p>
    <p class="abs">
        I should be displayed above both fixed position elements
    </p>
</div>
<div class="fixed second">
    <p>This is a fixed element</p>
</div>

CSS

.fixed {
    font-size: 16px;
    background: #eee;
    border-bottom: 1px solid #ccc;
    position: fixed;
    height: 3em;
    width: 100%;
    z-index: 1;
}

.abs {
    position: absolute;
    background: #acc;
    height: 6em;
    top: 0;
    left: 25%;
    width: 50%;
    z-index: 2;
}

.second {
    top: 3.0625em;
}

这是 JSFiddle 上的工作示例：

http://jsfiddle.net/GS4E4/8/

我有点被这件事难住了。有没有人解释为什么会发生这种情况以及解决方法？

Answer 1

正如皮特的评论所暗示的，这一切都归结为堆叠上下文。在这种情况下，两个.fixed 元素都通过position: fixed; 创建自己的堆叠上下文。第一个.fixed 元素的子元素在其父元素中创建嵌套 堆叠上下文。因为它嵌套在现有的堆叠上下文中，所以它永远不会突破并堆叠得更高；它的 z-index 现在是相对于它的父级的。

规范实际上对细节有所帮助：http://www.w3.org/TR/CSS2/visuren.html#z-index。您可以通过编号列表看到子堆叠上下文被最后绘制。

因此，在您的情况下，您的 .fixed.first 元素的 z-index 需要为 2 才能使其子元素堆叠在 .fixed.second 之上。

Answer 2

将 .abs 移到两个 div 之外。

<div class="fixed first">
    <p>This is a fixed element</p>   
</div>
<div class="fixed second">
    <p>This is a fixed element</p>
</div>
<p class="abs">
        I should be displayed above both fixed position elements
    </p>

见http://jsfiddle.net/GS4E4/9/ 您现在拥有它的方式 .abs 相对于 .first 定位，因此它将位于 .first 之上但不高于 .second，您的小提琴解释正确。