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

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

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

this is what i have (this is what it's suppose to happen):

this is what i want:

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

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

有人讨论过使用转义堆栈上下文position: fixed但似乎这还没有发生（参见这个fiddle和question产生它的）。

替代解决方案：

对于您来说，一个可能的替代解决方案是嵌套Parent-1 inside Parent-2然后使用position: absolute to put Parent-1无论你想要它在哪里。