Question

我有一种情况，我在页面上有两个或多个固定位置元素，显示堆叠在另一个上面（也就是说，第二个顶部靠近底部第一个 - 没有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元素需要具有2的z-index，以便其子代在.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定位的，所以它会位于上方。第一个但不高于。第二个，你的小提琴正确地解释。

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

2 个答案: