Modal遮罩无法覆盖相对定位元素，如何不重置定位修复？

问题根源是堆叠上下文：当position: relative的元素设置了非auto的z-index时，会创建独立的堆叠上下文，内部元素的层级只在该上下文内生效；如果Modal的层级被父元素的堆叠上下文限制，或者自身z-index不足，就无法覆盖这些relative元素。

以下是无需重置position: relative的解决办法：

1. 让Modal直接挂载在body下并设置高z-index #

将Modal遮罩的DOM结构直接放在<body>标签内，避免被其他带有堆叠上下文的父元素限制，同时设置position: fixed和足够高的z-index：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999; /* 数值需大于所有relative元素的z-index */
}

fixed定位的元素基于视口渲染，堆叠上下文绑定到根元素（<html>），不受其他relative元素的堆叠上下文影响。

2. 将relative元素的z-index设为auto #

如果relative元素的z-index被手动设置为非auto值（比如z-index: 1），改成z-index: auto即可：

.relative-element {
  position: relative;
  z-index: auto; /* 移除自定义z-index，避免创建独立堆叠上下文 */
}

此时该relative元素不会创建独立堆叠上下文，Modal的高z-index可以直接覆盖它。

3. 给Modal的父元素创建独立堆叠上下文 #

如果无法调整Modal的DOM结构，给Modal的直接父元素设置isolation: isolate创建新的堆叠上下文，再给Modal设置足够高的z-index：

.modal-parent {
  isolation: isolate; /* 创建新的堆叠上下文 */
}

.modal-overlay {
  position: absolute; /* 或fixed，根据布局调整 */
  z-index: 100; /* 在父元素的堆叠上下文内足够高 */
  /* 其他布局样式 */
}

这样Modal的层级只受父元素堆叠上下文的限制，不会被外部relative元素的层级干扰。

关键原理补充 #

只有当元素满足以下条件之一时，才会创建独立堆叠上下文：

• position为relative/absolute/fixed/sticky且z-index非auto
• 设置了transform、opacity（<1）、filter等属性
• 使用了isolation: isolate

只要避免relative元素触发堆叠上下文，或者让Modal处于更高层级的堆叠上下文，就能解决遮罩覆盖问题。

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