Z索引在固定位置元素内的绝对定位不符合预期 [英] Z-index not behaving as expected with absolute positioning inside a fixed position element

问题描述

我遇到这样的情况，我在一个页面上有2个或更多固定位置元素，这些元素显示为一个堆叠在另一个之上（也就是说，第二个的顶部紧靠第一个的底部-这些元素之间不存在z-index堆叠）。在第一个固定位置元素内，有一个绝对位置比其固定父元素高的元素，因此它超出了该固定父元素的底部。

I've got a situation where I've got 2 or more fixed position elements on a page displaying stacked one on top of the other (that is, the top of the second one is abutting the bottom of the first one - no z-index stacking of those elements). Inside the first fixed position element, there's an absolutely positioned element which is taller than its fixed parent, so it extends beyond the bottom of that fixed parent.

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

The trouble is that the next fixed position element gets displayed on top of the absolutely positioned element. I've got a higher z-index value set on the absolutely positioned element than on the fixed positioned elements, but it is ignored completely.

为帮助阐明问题，我把这个例子放在一起：

To help clarify the issue, I put together this example:

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上的工作示例：

Here's the working example on JSFiddle:

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

我对此感到困惑。有没有人解释为什么会发生这种情况以及解决该问题的方法？

I'm kind of stumped by this. Does anyone have an explanation as to why this is happening, and a way to work around it?

推荐答案

正如Pete的评论所暗示的那样，这全都归结为堆叠上下文。在这种情况下，两个 .fixed 元素都通过 position：fixed; 来创建自己的堆栈上下文。第一个 .fixed 元素的子元素在其父元素中创建一个堆栈上下文 nested 。因为它嵌套在现有的堆栈上下文中，所以它永远不会破裂并堆叠到更高的位置；

As Pete's comment alludes to, it all comes down to stacking contexts. In this case, both .fixed elements create their own stacking contexts by virtue of being position: fixed;. The child of the first .fixed element creates a stacking context nested within its parent. Because it's nested inside an existing stacking context, it can never break out and stack any higher; its z-index is relative to its parent now.

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

The spec is actually somewhat helpful with the particulars: http://www.w3.org/TR/CSS2/visuren.html#z-index. You can see via the numbered list that child stacking contexts are painted dead last.

因此，在您的情况下，您的 .fixed.first 元素的子元素的z索引必须为2，才能堆叠在 .fixed.second 之上。

So in your case, your .fixed.first element would need to have a z-index of 2 for its child to stack atop .fixed.second.

这篇关于Z索引在固定位置元素内的绝对定位不符合预期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！