如何使堆叠顺序底部的堆叠上下文中包含的元素出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面?
例如:
HTML:
<div class="Parent-1"></div>
<div class="Parent-2">
<div class="pepe"></div>
<div class="pepin"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
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;
}
Run Code Online (Sandbox Code Playgroud)
这就是我所拥有的(这就是应该发生的事情):

这就是我要的:

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