位置子级的 z-index 是否有解决方法：已修复在 Chrome 中不起作用？

Question

Chrome 处理 position:fixed 元素下方的 z-index 的方式与 Firefox 或 Safari 不同。 -> jsfiddle

从 Adam Spiers 在这里的另一个答案中，我了解到这是由于on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto。

有解决办法吗？有什么方法可以防止 chrome 创建新的堆叠上下文？替换 position: fixed 几乎不是一种选择，因为它用于修复网站教程软件，该软件使用 z-index 突出显示页面的某些部分。

Answer 1

如果您将粉色 div 的 z-index 设置为 0，如下所示：

.div1 {
position: relative;
z-index: 0;
height: 100px;
background-color: pink;
}

绿色 div 的 z-index 为 1，它将在 chrome 和 firefox 中正确显示。

Answer 2

我刚刚打开了一个pull request，它可以让您控制背景注入页面的位置。这不会阻止 Chrome 创建新的堆叠上下文，但它至少允许您将背景放置到与 step 元素相同的堆叠上下文中。如果接受，这可能会解决您的问题。