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

Question

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

e.g：

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中的元素顺序，也不会删除Parents元素中的z-index

Answer 1

简短的回答是，你不能。来自MDN's explanation about stacking context的图片很好地解释了这一点：

有人谈到使用position: fixed转义堆叠上下文，但似乎还没有发生这种情况（请参阅此fiddle和生成它的question）。

替代解决方案：

对于您而言，可能的替代解决方案是将Parent-1嵌套在Parent-2内，然后使用position: absolute将Parent-1置于您想要的任何位置。