6

我有一种情况，我在页面上有 2 个或更多固定位置元素显示堆叠一个在另一个之上（也就是说，第二个的顶部紧靠第一个的底部 - 没有 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/

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

4

2 回答 2

7

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

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

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

于 2013-09-05T15:35:10.307 回答
1

将 .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，您的小提琴解释正确。

于 2013-09-05T15:07:03.623 回答