Html 我可以更改位置：绝对元素的z索引堆叠顺序吗？

这是我的密码：

正文{
填充：50px；
}
雷尔先生{
高度：20px；
宽度：100%；
背景色：#EFEF；
位置：相对位置；
边缘底部：15px；
}
.腹肌{
位置：绝对位置；
高度：50px；
宽度：300px；
背景色：红色；
z指数：1；
}
abs2先生{
位置：绝对位置；
顶部：0px；
高度：180像素；
宽度：50px；
背景颜色：绿色；
边框：1px纯黑；
顶部：-40px；
z指数：2；
}
.班次{
左：100px；
}

1.
2.

由于具有

.abs

的所有元素共享相同的堆叠上下文，因此可以为包含绿色块的元素指定更高的

z索引值


<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>


更新
根据您的更新：

是否可以将绿色
.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>

2）从
.abs
中删除
z-index
属性，使嵌套的
.abs2
位于具有
.abs
类的所有元素顶部：

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

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

只有在这个特定的实例1中，根据提供的演示，我们可以通过删除
相对
元素的
.rel
定位来解决这个问题。所以从现在起，
.abs
元素将相对于初始包含块（可视为视口）进行定位。这意味着将相对于视口计算
顶部
/
右侧
/
底部
/
左侧
属性：

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


1这不是一个普遍的解决办法。您应该谨慎使用此方法。
您还需要为父容器指定更高的z索引。您已经在
rel
上设置了
position:relative
，这也是必需的，因此添加z索引应该可以做到这一点。
对不起，这不是我想要的，我的坏朋友！我过分简化了这个例子。我已经回答了这个问题。