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

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中更改elemnts顺序，也不能删除父元素中的z-index。

Answer 1

简单地说，你做不到。这张来自MDN对堆叠上下文的解释的图片很好地解释了这一点：

​

​

有关于使用position: fixed转义堆叠上下文的讨论，但这似乎还没有发生(请参阅这个小提琴和生成它的问题 )。

替代解决方案：

对您来说，另一种可能的解决方案是将Parent-1嵌套到Parent-2中，然后使用position: absolute将Parent-1放在任何您想要的位置。