Question

这是我的代码：

body {
    padding: 50px;
}
.rel {
    height: 20px;
    width: 100%;
    background-color: #efefef;
    position: relative;
    margin-bottom: 15px;
}
.abs {
    position: absolute;
    height: 50px;
    width: 300px;
    background-color: red;
    z-index: 1;
}
.abs2 {
    position: absolute;
    top: 0px;
    height: 180px;
    width: 50px;
    background-color: green;
    border: 1px solid black;
    top: -40px;
    z-index: 2;
}
.shift {
    left: 100px;
}

<div class="rel">
    <div class="abs">
        <div class="abs2">1</div>
    </div>
</div>
<div class="rel"></div>
<div class="rel">
    <div class="abs">
        <div class="abs2 shift">2</div>
    </div>
</div>
<div class="rel"></div>
<div class="rel"></div>

是否可以将绿色“abs2”div叠加在第二个红色“abs”div之上？两个都是绝对定位的（每个绿色“abs2”div应该高于每个红色“abs”div。）

我知道有一种称为堆叠上下文的东西，但我无法弄清楚如何使我的示例工作。如果我阅读Mozilla's explanation

，这似乎是不可能的

JSFiddle

Answer 1

由于具有.abs的所有元素共享相同的堆叠上下文，因此您可以为包含绿色块的元素提供更高的z-index值。

<强> Example Here

<div class="rel">
    <div class="abs higher"> <!--
                    ^-- Added class -->
        <div class="abs2"></div>
    </div>
</div>
<div class="rel"></div>
<div class="rel">
    <div class="abs"></div>
</div>

.abs { position: absolute; z-index:1; }

.abs.higher {
    z-index: 2; /* anything bigger than 1 */
}

.abs2 { position: absolute; z-index:1; }

更新

根据您的更新：

是否可以将绿色.abs2 div叠加在第二个红色之上 .abs div？ [...] 每个绿色.abs2 div应该以上每个红色.abs div。

目前，.abs和.abs2都会建立新的堆叠上下文。假设当前标记.abs2嵌套在.abs中，有两种选择：

1）最简单的，如果可能的话，将.abs2 下一个放在.abs中，而不是放在<div class="rel"> <div class="abs"></div> <div class="abs2">1</div> </div>中标记，以便他们可以共享相同的堆叠上下文： Example 。

.abs { position: absolute; z-index: 1; }
.abs2 { position: absolute; z-index: 2; }

z-index

2）从.abs移除.abs2属性，让嵌套.abs位置位于.abs类的所有元素的顶部： Example

但是可以看出，在这种方法中，.rel元素的某些部分将位于以下z-index容器的后面。这是因为位于相同堆叠上下文中的定位元素将与DOM层次结构堆叠，除非它们具有明确的relative值。

仅在此特定实例中¹ - 基于提供的演示 - 我们可以通过删除.rel元素的.abs位置来解决此问题。因此，从现在开始，top元素将相对于初始包含块（视觉上，视口）定位。这意味着相对于视口计算right / bottom / left / {{1}}属性： Example 。

¹ _{这不是一般解决方案。你应该谨慎使用这种方法。}

Answer 2

您还需要为父容器提供更高的z-index。您已经position: relative rel，这也是必要的，因此添加z-index应该这样做。

我可以更改position：absolute elements的z-index堆叠顺序吗？

2 个答案:

更新