css - 位置 :fixed not working in Chrome? 的子项的 z-index 是否有解决方法

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 中正确显示。