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

Question

我有一种情况,我在页面上有两个或多个固定位置元素,显示堆叠的一个在另一个上面(也就是说,第二个的顶部邻接第一个的底部 - 没有z-索引堆叠这些元素).在第一个固定位置元素内部,有一个绝对定位的元素,它高于其固定的父元素,因此它延伸到固定父元素的底部之外.

问题是下一个固定位置元素显示在绝对定位元素的顶部.我在绝对定位的元素上设置了比固定定位元素更高的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.