如何使底部堆叠上下文中的元素保留在另一个较高堆叠上下文的前面？

Question

如何使堆叠顺序底部的堆叠上下文中包含的元素出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面？

例如：

HTML：

<div class="Parent-1"></div>

<div class="Parent-2">

    <div class="pepe"></div>
    <div class="pepin"></div>

</div>

CSS：

.Parent-1{
    position: absolute;
    z-index: 10;
    background-color: green;
}

.Parent-2 {
    position: absolute;
    z-index: 5;
    background-color: red;
}

.pepe, .pepin{        
    background-color: blue;
}

.pepin{
    position: fixed;
    z-index: 100;
}

这就是我所拥有的（这就是应该发生的事情）：

这就是我要的：

请记住，我无法更改 HTML 中的元素顺序，也无法删除 Parent 元素中的 z-index

Answer 1

简短的回答是你不能。这张图片来自MDN 关于堆叠上下文的解释很好地解释了这一点：

\n\n

\n\n

有人讨论过使用转义堆栈上下文position: fixed，但似乎这种情况还没有发生（请参阅此小提琴和问题生成它的

\n\n

替代解决方案：

\n\n

对于您来说，一个可能的替代解决方案是嵌套Parent-1在里面Parent-2，然后用于position: absolute放置Parent-1在您想要的任何位置。

\n