应统一遮罩与弹层的层叠上下文：将二者置于同一 fixed 或 relative 父容器内并设 z-index，或用 Teleport/Portal 挂载至 body；避免数字军备竞赛，优先检查 DOM 顺序与 stacking context。
遮罩层 z-index 比弹层还高，怎么调？
遮罩层盖住弹层，本质是层叠上下文（stacking context）没理清，不是简单调 z-index 数值就能解决。常见错误是给遮罩和弹层都设了 position: relative 或 position: absolute，但父容器没触发新层叠上下文，导致它们被压进同一层级里比大小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保弹层及其遮罩属于同一个「最近的层叠上下文祖先」，比如把两者都放在一个
div容器内，该容器设position: relative+z-index: 1000 - 遮罩用
position: fixed时，它会脱离文档流、直接相对于视口定位，此时它的z-index必须比所有非fixed弹层更高——但更稳妥的做法是：遮罩和弹层共用一个fixed父容器 - 避免在遮罩上写
z-index: 9999、弹层写z-index: 10000这种“数字军备竞赛”，容易被其他 CSS 框架或组件意外覆盖
用 pointer-events: none 让遮罩不挡点击，但弹层仍可交互
有些场景下遮罩只是视觉提示，不需要拦截操作（比如只用来模糊背景），这时强行用 z-index 把它压低反而破坏结构。直接让遮罩“透明”给鼠标事件穿过更干净。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩元素加
pointer-events: none，同时确保其子元素（如弹层）显式设pointer-events: auto（因为pointer-events不继承） - 注意：如果遮罩里有需要响应点击的按钮（比如关闭叉），就不能全关
pointer-events，得单独给按钮恢复 - 兼容性没问题，
pointer-events在现代浏览器包括 IE11 都支持
弹层用 position: fixed 后被遮罩挡住，为什么？
当弹层用了 position: fixed，但它依然被遮罩盖住，大概率是遮罩也用了 fixed，且两者不在同一层叠上下文里——浏览器按 DOM 顺序和 z-index 共同决定谁在上，而 DOM 顺序优先级高于 z-index（同级时）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查遮罩和弹层在 HTML 中的先后顺序：如果遮罩在弹层后面出现，即使弹层
z-index更高，也可能被遮罩盖住（尤其当两者z-index都没设或为auto） - 统一用
position: fixed的话，必须明确设z-index，且弹层的值严格大于遮罩（例如遮罩z-index: 100，弹层至少z-index: 101） - 不要依赖浏览器默认
z-index：未设值的fixed元素，层叠等级等同于z-index: auto，实际渲染中可能低于显式设值的元素
Vue/React 项目中动态插入的弹层被遮罩吞掉
框架里用 v-if 或 useState 控制弹层显示时，DOM 是动态挂载的，如果遮罩是全局组件（比如 App 根节点下），而弹层插在某个子组件内部，就容易因层叠上下文断裂导致遮罩“越级覆盖”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把弹层 mount 到
document.body（Vue 的teleport/ React 的createPortal），让它脱离原组件的层叠上下文限制 - 遮罩也应与弹层同级挂载，而不是作为某个页面组件的子元素存在
- 避免在弹层组件内部再嵌套一层
position: relative容器，这可能意外创建新层叠上下文，把弹层“锁”在局部层级里
真正麻烦的不是 z-index 数字本身，而是层叠上下文的嵌套关系和 DOM 插入位置。改样式前先用浏览器开发者工具的 Layers 面板看一眼当前元素属于哪个 stacking context，比盲目调数字快得多。
