Webkit - 修复定位元素似乎具有固有的堆叠上下文答案

【问题标题】：Webkit - fix positioned elements seem to have inherent stacking contextWebkit - 修复定位元素似乎具有固有的堆叠上下文
【发布时间】：2023-03-02 23:06:01
【问题描述】：

在使用 ScrollMagic 和固定标头时，在 Chrome 中遇到了这个“错误”。

我将保持简短，我想将一个绝对定位元素放在另一个元素的前面，但是这两个元素位于单独的固定定位容器中。这是代码：

.container {
    position: absolute;
}

.fixed {
    position: fixed;
    left: 100px;
}

.elm {
    position: absolute;
    width: 50px;
    height: 50px;
}

.elm-back {
    z-index: 1;
    top: 50px;
    left: 50px;
    background: teal;
}

.elm-front {
    z-index: 2;
    top: 25px;
    left: 25px;
    background: salmon;
}

<div class="container container-1">
    <div class="elm elm-front"></div>
</div>
<div class="container container-2">
    <div class="elm elm-back"></div>
</div>

<div class="container fixed container-1">
    <div class="elm elm-front"></div>
</div>
<div class="container fixed container-2">
    <div class="elm elm-back"></div>
</div>

前两个盒子在绝对定位容器内，另外两个在固定定位容器内。

Firefox 和 IE 都按预期处理它（下图）。

虽然 Chrome 和 Safari 执行以下操作：

有人知道吗？了解为什么会发生这种情况，并希望有解决方案或解决方法？我已经尝试过使用transform: translateZ(0)，我唯一能做到的就是前两个元素的行为与其他两个元素一样，但我希望反过来。

【问题讨论】：

可能和这个google dev article有关。
请注意，与此同时 FF 的行为似乎与 chrome 相同。

标签： html css google-chrome safari webkit

【解决方案1】：

您将他们的容器样式设置为固定，因此他们 Z 索引到直接文档 - 容器。虽然第一组也被 Z 索引到文档（因为中间没有任何相对父级），但第一组是 elements 被设置样式，因此它们的 Z 索引正确。

浏览器渲染每个容器的固定位置并通过他们自己的算法将它们相互放置，所以如果你想修复它，只需让浏览器也知道你想要的容器的 Z 索引：

.container-1 {
  z-index: 1;
}

.container-2 {
  z-index: 0;
}

或者将每个绝对 DIV 从一开始就放在一起，这样它们就会被 Z 索引到同一个父级。

【讨论】：