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

Question

在使用 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)，我唯一可以实现的是前两个元素的行为与其他两个元素相同，但我希望相反。

Answer 1

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

浏览器呈现每个容器的固定位置并通过它们自己的算法将它们放在彼此上，所以如果你想修复它，只需让浏览器知道你想要的容器的 Z 索引:

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

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

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