遮罩层不必z-index更高，但需与弹层同属一个堆叠上下文；常见失效原因是父元素position/transform创建了新上下文，导致z-index局部生效；最优解是将遮罩层和弹层均挂载到body下。
遮罩层必须比弹层 z-index 高吗
不是必须，但必须确保遮罩层的堆叠上下文（stacking context）能覆盖弹层。常见错误是只调高 z-index，却忽略了父容器的 position 或 transform 创建了新的堆叠上下文，导致子元素的 z-index 只在局部生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查遮罩层和弹层是否同属一个堆叠上下文：用浏览器开发者工具的“Layers”面板或勾选“Show stacking context”验证
- 若弹层被包裹在
position: relative且z-index: 10的容器中，遮罩层即使设z-index: 9999也无效——因为两者不在同一上下文 - 最稳妥做法：把遮罩层（
.overlay）和弹层（.modal）都挂到<body>直接子级，避免嵌套干扰
用 transform 或 opacity 触发新堆叠上下文怎么办
给任意父元素加 transform: translateZ(0)、opacity: 0.99 或 will-change: transform，都会隐式创建新堆叠上下文，使内部 z-index 重置计数起点。这是遮罩“突然失效”的高频原因。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用可疑样式：临时移除父级的
transform、filter、opacity < 1等属性，观察遮罩是否恢复覆盖 - 若必须用动画效果，改用
top/left位移 +transition，而非transform - 对遮罩层本身加
isolation: isolate无用；真正有效的是确保它不被任何创建上下文的祖先包裹
移动端 iOS Safari 遮罩穿透点击怎么防
iOS Safari 在遮罩层上快速滑动时，可能触发“穿透点击”（即手指划过遮罩，底层按钮仍被触发），本质是 pointer-events: none 未生效或事件冒泡未截断。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层必须同时设置：
pointer-events: auto（默认值即可，别误写成none）+touch-action: none - 在遮罩层绑定空的
touchstart和click事件，并调用event.preventDefault()和event.stopPropagation() - 避免在遮罩层内使用
ontouchstart="return false"这类内联写法——iOS 对内联事件处理不一致
Vue/React 中动态插入遮罩层要注意什么
框架组件卸载时若没清理遮罩 DOM，残留的 .overlay 会持续拦截用户操作；更隐蔽的问题是多个组件同时渲染遮罩，导致 z-index 层叠错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
useEffect（React）或onBeforeUnmount（Vue 3）确保卸载时移除遮罩节点，而非仅靠v-if或条件渲染 - 全局遮罩应由单一状态管理（如 Redux / Pinia），禁止各组件各自
document.body.append(overlay) - 用 CSS 自增
z-index值不可靠，推荐预设层级表：--z-overlay: 1000、--z-modal: 1010，通过 CSS 变量统一控制
遮罩的“覆盖失败”往往不是 z-index 数字不够大，而是堆叠上下文被意外切割，或者移动端事件模型没对齐。动手前先打开 Layers 面板看一眼真实层级结构，比盲目调数字快得多。
