Chrome中绝对定位div内固定定位div被滚动条覆盖（疑似Bug）

这个问题我之前也踩过坑，Chrome对position: fixed元素与父级overflow:auto的绝对定位容器的渲染逻辑，和Firefox、IE确实存在差异——Chrome会把固定定位元素的渲染上下文绑定到父级滚动容器上，导致滚动条“压”在固定元素上面，而其他浏览器则正确识别固定定位是相对于视口的。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：将固定定位元素移出滚动容器（最稳妥） #

固定定位的设计初衷就是相对于浏览器视口定位，把它放在带有overflow:auto的绝对定位容器里本身就违背了这个逻辑，只是其他浏览器做了兼容处理。直接把三级弹窗移到二级菜单容器外面作为同级元素，从根源上避免渲染冲突：

修改前结构 #

<div class="level-1">
  <!-- 二级菜单项内容 -->
  <div class="level-3-popup">
    <!-- 三级及以上菜单项 -->
  </div>
</div>

修改后结构 #

<div class="level-1">
  <!-- 二级菜单项内容 -->
</div>
<div class="level-3-popup">
  <!-- 三级及以上菜单项 -->
</div>

对应的CSS保持固定定位即可：

.level-1 {
  background: red;
  height: 150px;
  width: 200px;
  position: absolute;
  z-index: 1;
  overflow-y: auto;
}

.level-3-popup {
  position: fixed;
  z-index: 999; /* 确保层级高于二级容器 */
  /* 其他弹窗样式 */
}

方案2：给固定定位元素触发GPU加速（无需改结构） #

如果不想调整DOM结构，可以给三级弹窗添加transform: translateZ(0)，触发Chrome的GPU加速，让元素的渲染层级脱离父级滚动容器的上下文，避开滚动条：

.level-3-popup {
  position: fixed;
  z-index: 999;
  transform: translateZ(0); /* 关键属性 */
  /* 其他弹窗样式 */
}

这个方法简单快捷，副作用极小，现代浏览器都支持。

方案3：调整父级容器的滚动条样式（兜底方案） #

如果上面两种方法都不适用，可以自定义父级容器的滚动条样式，让它不覆盖固定元素——比如把滚动条放在容器内部，或者缩小容器宽度给滚动条留出空间：

.level-1 {
  /* 原样式保留 */
  padding-right: 15px; /* 给滚动条留出空间 */
  box-sizing: border-box;
}

/* 自定义滚动条（可选） */
.level-1::-webkit-scrollbar {
  width: 10px;
}
.level-1::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

内容的提问来源于stack exchange，提问作者Gildas 21