绝对定位遮罩层对部分元素无效的原因排查

以下是针对遮罩层无法覆盖部分元素的具体排查点：

• 检查不受影响元素的定位与z-index
  打开浏览器开发者工具（F12），查看标题、复选框、滑块等元素的计算样式：

  • 确认这些元素是否设置了position: relative/absolute/fixed（非static），且自身或父元素的z-index数值高于遮罩层的1000。部分UI组件库的原生控件会默认设置较高的z-index，导致穿透遮罩。
  • 若发现此类情况，可临时将这些元素的z-index设为auto或低于1000，测试是否能被遮罩覆盖。

• 排查堆叠上下文冲突
  堆叠上下文会让内部元素的z-index仅在当前上下文内生效，外部遮罩层无法穿透。检查不受影响元素的父容器是否存在以下触发堆叠上下文的属性：

  • position属性（非static）+ z-index（非auto）
  • transform、perspective、filter（哪怕是transform: translate(0,0)这类无视觉变化的设置）
  • contain: layout/paint/style
  • opacity < 1
    若父容器存在上述属性，需调整这些属性，或把遮罩层移到该堆叠上下文的同级位置（而非body下）。

• 检查原生表单控件的特殊渲染层级
  部分浏览器对原生表单控件（如复选框、滑块、按钮）采用特殊的渲染机制，其层级可能高于普通div遮罩层。可尝试：

  • 给遮罩层添加position: fixed（替代absolute），确保它脱离文档流的层级控制
  • 若不需要遮罩层拦截交互，可添加pointer-events: none（但如果需要遮罩层阻止用户操作，此方法不适用，需优先解决堆叠上下文问题）

• 验证遮罩层的覆盖范围
  检查遮罩层的计算高度是否为100%视口高度：

  • 确认html和body的height: 100%是否生效，是否存在overflow: hidden导致遮罩层被截断
  • 可临时给遮罩层添加background-color: red（替换半透明黑色），直观查看它是否完整覆盖整个页面

• 排查是否存在硬件加速属性
  若不受影响元素或其父元素设置了will-change、transform: translateZ(0)等硬件加速属性，可能会被浏览器提升渲染层级，导致遮罩无法覆盖。可临时移除这些属性测试效果。

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