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

Question

遇到这个＆＃34; bug＆＃34;在使用ScrollMagic和固定标题时在Chrome中。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Chrome和Safari执行以下操作时：

有人知道吗，例如有一个关于为什么会发生这种情况并希望解决方案或解决方法的来源？我已经尝试过使用transform: translateZ(0)，我唯一可以实现的就是前两个元素的行为与其他两个元素一样，但我想要反过来。

Answer 1

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

浏览器呈现每个容器固定位置并通过它们自己的算法将它们分别放在另一个容器上，因此如果要修复它，只需让浏览器知道容器所需的Z索引：

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

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

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