滚动条仅在 chrome 中以较高的 Z-index 与 DIV 重叠答案

【问题标题】：Scrollbars overlapping DIVs at higher Z-index only in chrome滚动条仅在 chrome 中以较高的 Z-index 与 DIV 重叠
【发布时间】：2018-02-06 00:47:15
【问题描述】：

我有一个绝对定位的div，上面定义了z-index。在这个 div 中有一个固定的子 div，上面也定义了一个 z-index。我希望固定的div 位于他的父母之上。

在所有其他浏览器中，这可以很好地呈现，但在 chrome 中，当父 div 有滚动条时，它会出现在其子元素的顶部。 Here 是 CodePen。

在父级div 上添加transformX(0) 对我没有帮助，因为子级div 会限制在父级中。非常感谢您对此的任何帮助。我只在 Chrome 帮助论坛中找到了this issue，但没有得到答复。

【问题讨论】：

【解决方案1】：

使用 webkit 引擎应用 z-index。希望能解决问题

.abs::-webkit-scrollbar {
 z-index:10;
}

【讨论】：

感谢您的回复，但是如上所述添加 z-index 会隐藏滚动条，所以看起来如果我们如上所述向滚动条添加任何有效样式（我尝试仅使用宽度）隐藏在这种情况下，滚动条和用户必须使用 -webkit-scrollbar 和 -webkit-scrollbar-thumb 完全自定义滚动条。但我只需要浏览器特定的滚动条，但不希望它出现在 div 上。还想知道 Chrome 浏览器是否存在已知行为或问题。