遮罩层必须与弹层处于同一层叠上下文，否则z-index无效；常见问题包括弹层父容器触发新上下文、遮罩祖先含opacity<1、iOS fixed失效及框架v-if/v-show不同步。
遮罩层 z-index 必须高于弹层本身
遮罩解决不了弹层覆盖问题，除非它在层叠上下文中的顺序真正压住弹层。常见错误是只给遮罩设 z-index: 100，但弹层父容器有 transform、opacity < 1 或 will-change，意外创建了新的层叠上下文，导致弹层及其子元素（包括遮罩）被框死在该上下文中——此时遮罩再高的 z-index 也盖不住同级弹层内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 检查弹层最外层容器是否触发了层叠上下文（用浏览器开发者工具的“Computed”面板看
contain、transform、filter等属性） - 遮罩和弹层必须处于同一层叠上下文内；若弹层父容器已创建新上下文，就把遮罩移出该容器，挂到
<body>下 - 遮罩的
z-index值需比弹层根节点高，而非比弹层内部某个<div>高
遮罩本身不能有 opacity < 1 的父容器
opacity: 0.9 这类设置会强制创建层叠上下文，且让其所有子元素（包括遮罩和它包裹的弹层）被降级处理。结果就是：遮罩看似半透明，实则和弹层一起被“锁”在低层级，页面其他绝对定位元素反而能穿透盖上来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩自身可设
opacity，但它的任意祖先（直到<body>）都不能有opacity < 1 - 替代方案：用
background: rgba(0, 0, 0, 0.5)实现半透明效果，它不触发层叠上下文 - 避免对遮罩容器用
filter: blur()或transform: scale(1)——哪怕看似无意义，也会创建新上下文
移动端 iOS Safari 的 position: fixed 遮罩失效
iOS Safari 对 position: fixed 在滚动时的渲染有特殊限制：当页面存在 overflow: scroll 的容器（如弹层内部滚动区），或触发了 viewport 缩放，fixed 遮罩可能脱离视口、错位甚至消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩改用
position: absolute+ 动态监听window.innerHeight和scrollY更新top和height - 禁用 body 滚动：
document.body.style.overflow = 'hidden'，防止遮罩被滚动带偏 - 避免在遮罩上直接绑定
touchmove阻止默认行为——iOS 可能误判为手势冲突，导致遮罩响应迟滞
Vue/React 中遮罩组件的 v-if 与 v-show 切换陷阱
v-if 会销毁遮罩 DOM 节点，下次打开时重新挂载，若此时弹层已通过 ref 或 useState 提前渲染，遮罩可能晚于弹层进入文档流，造成闪现覆盖失败；而 v-show 仅切 display，但若弹层用 transition 动画入场，遮罩未同步动画控制，会出现“先露内容、后上遮罩”的视觉撕裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩与弹层共用同一控制状态（如
isModalOpen），且都用v-if或都用v-show，保持 DOM 生命周期一致 - 若需动画，遮罩使用
transition的appear+mode="out-in"，确保遮罩先入场、弹层再入场 - React 中避免把遮罩写在弹层组件内部——容易因组件重渲染导致遮罩被重复挂载或脱离上下文
z-index，实际在调试层叠上下文的嵌套深度。 
