为何模态框遮罩层在模态框上方？求容器position配置规则

核心原因：堆叠上下文的层级隔离问题 #

你遇到的问题本质是堆叠上下文的隔离：尽管给模态框设置了更高的z-index，但如果模态框被包裹在一个创建了独立堆叠上下文的容器中，它的z-index仅在该容器内部生效，无法和处于根堆叠上下文的遮罩层（动态添加到DOM末尾）进行层级比较——这就是遮罩层能覆盖模态框的关键原因。

针对容器position的关键配置规则 #

• 禁止模态框父容器触发独立堆叠上下文：如果父容器必须使用position: relative（比如库组件自带），确保它的z-index为auto，且没有transform/perspective/filter/will-change这类会触发堆叠上下文的属性。position: relative本身不会创建堆叠上下文，只有搭配非auto的z-index时才会触发。
• 强制让模态框与遮罩层处于同一堆叠上下文：
  • 最优方案：将模态框也移到DOM末尾（和遮罩层同级，比如直接作为body的子元素），脱离原来的库组件容器。此时两者同属根堆叠上下文，只要给模态框设置比遮罩层更高的z-index即可（比如遮罩层用z-index: 1000，模态框用z-index: 1001）。
  • 若无法移动模态框：给模态框的最外层非堆叠上下文容器设置足够高的z-index，确保整个容器的堆叠层级高于遮罩层。示例代码：

    /* 假设库组件的根容器是.modal-wrapper，自带position: relative */
    .modal-wrapper {
      position: relative;
      z-index: 1002; /* 必须高于遮罩层的z-index */
    }
    .modal {
      z-index: 1; /* 此z-index仅在.modal-wrapper内部生效，只要高于容器内其他元素即可 */
    }
    .modal-backdrop {
      z-index: 1000;
    }
    

• 注意fixed定位的特殊情况：如果模态框用position: fixed，它默认属于根堆叠上下文，直接设置更高z-index即可生效。但如果父容器存在transform属性，fixed会降级为absolute，此时模态框会进入父容器的堆叠上下文，需要按照上述规则调整父容器的层级。

实操排查步骤 #

1. 用浏览器开发者工具选中模态框，查看Computed样式中的stacking context属性，确认它所属的堆叠上下文。
2. 同样检查遮罩层的堆叠上下文，若两者不同，要么调整DOM结构让它们同属一个上下文，要么提升模态框所在堆叠上下文的整体层级。
3. 排查所有父容器的CSS属性，移除不必要的transform/filter等触发堆叠上下文的属性，或给模态框套一个独立容器脱离这些属性的影响。

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