Firefox中低z-index固定元素覆盖滚动条的原因及解决方案

这个问题我之前帮朋友排查过，本质是Chrome和Firefox对固定定位元素的堆叠上下文处理逻辑不一样，我给你拆解下原因和靠谱的解决办法：

问题成因 #

核心差异在于堆叠上下文的渲染规则：

• 在Chrome中，当父容器（.scrolldiv）设置position: fixed时，会创建一个独立的堆叠上下文，内部的position: fixed子元素（.fixed.item）会被限制在这个上下文里。父容器的滚动条属于容器自身的一部分，层级自然高于子固定元素，所以不会被覆盖。
• 在Firefox中，内部的position: fixed子元素会直接脱离父容器的堆叠上下文，转而相对于整个视口定位。此时父容器的滚动条属于容器内部的内容层级，而子固定元素属于视口层级——哪怕你给子元素设置了更低的z-index，Firefox也会把它渲染在滚动条上方，就出现了滚动条被遮挡的情况。

解决办法 #

这里给你三个实用的方案，按需选择：

方案1：改用position: sticky（推荐） #

把底部固定元素的定位方式从fixed改成sticky，这样它会相对于滚动容器（.scrolldiv）定位，完全不会脱离父容器的堆叠上下文，滚动条自然能正常显示：

.scrolldiv .fixed.item{ 
  position: sticky; /* 替换原有的fixed */
  bottom: 0px; 
  background: #DDA; 
  width: 198px; 
  z-index: 2; 
}

这个方案最贴合需求，而且兼容性很好，现代浏览器都支持。

方案2：给滚动容器添加右侧内边距 #

如果必须保留position: fixed，可以给.scrolldiv添加右侧内边距，把滚动条的位置空出来，避免被底部固定元素覆盖：

.scrolldiv{ 
  /* 原有样式不变，新增下面这行 */
  padding-right: 17px; /* 留出Firefox默认滚动条的宽度 */
}
/* 同时调整底部元素的宽度，适配内边距后的容器 */
.scrolldiv .fixed.item{ 
  width: calc(200px - 17px - 2px); /* 200是容器宽度，17是内边距，2是原有宽度差值 */
}

注意：不同系统的滚动条宽度可能有差异，也可以用width: calc(100% - 19px)来适配，更灵活。

方案3：强制统一堆叠上下文 #

给.scrolldiv添加transform: translateZ(0)，强制创建一个硬件加速的堆叠上下文，让Firefox把内部固定元素纳入这个上下文，和Chrome表现一致：

.scrolldiv{ 
  /* 原有样式不变，新增下面这行 */
  transform: translateZ(0);
}

这个方法能快速对齐浏览器表现，但要注意硬件加速可能带来的潜在性能问题，适合场景受限的情况。

修改后的完整示例代码（以方案1为例） #

<div class="menuehead">顶部固定栏</div>
<div class="scrolldiv">
  <div>列表项1</div>
  <div>列表项2</div>
  <div>列表项3</div>
  <div>列表项4</div>
  <div>列表项5</div>
  <div>列表项6</div>
  <div>列表项7</div>
  <div>列表项8</div>
  <div>列表项9</div>
  <div>列表项10</div>
  <div class="fixed item">底部固定元素</div>
</div>

<style>
.menuehead{ background: #DDD; position: fixed; width: 100%; height: 40px; min-height: 40px; border: 2px solid black; }
.scrolldiv{ height: calc(100vh - 42px); width: 200px; margin-top: 42px; background: #AAA; position: fixed; overflow-y: auto; display: flex; flex-direction: column; z-index: 1002; }
.scrolldiv .fixed.item{ position: sticky; bottom: 0px; background: #DDA; width: 198px; z-index: 2; }
.scrolldiv :nth-child(2n) { background: #ADD; }
</style>

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