蒙版opacity动画失效是因初始用了display:none，应改用opacity+visibility+pointer-events控制显隐；遮不住固定定位元素是z-index未对齐，需建立层级契约：蒙版z-index设100，被遮盖元素z-index必须小于100。

点击按钮触发蒙版显示时，opacity 动画不生效

直接写 opacity: 0 → opacity: 0.7 并加 transition，但蒙版仍“啪”一下弹出来，没有渐变——大概率是初始状态用了 display: none。这个属性会让元素彻底脱离渲染流，transition 对它无效。

正确做法是让蒙版始终在 DOM 中、用 opacity 和 visibility 配合控制显隐：

• opacity: 0 + visibility: hidden + pointer-events: none 作为默认隐藏态
• 显示时只改 opacity: 0.7 和 visibility: visible，pointer-events: auto
• transition: opacity 0.3s ease, visibility 0.3s（注意：visibility 本身不可动画，但延迟触发可见性切换可避免点击穿透）

蒙版遮不住固定定位的弹窗或导航栏

常见现象：蒙版出来了，但顶部导航栏、右下角悬浮按钮依然 clickable 或 visible——z-index 没对齐。

关键不是堆数字，而是建立清晰的层级契约：

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 蒙版用 position: fixed，z-index 设为 100（不要用 9999 这种魔数）
• 所有需被遮盖的 UI 元素（如 header、aside、footer）z-index 必须 100
• 弹窗本身 z-index 设为 101，且必须比蒙版高一级，不能靠 JS 动态算
• 检查是否父容器有 transform、will-change 或 filter——这些会创建新的 stacking context，导致 z-index 失效

点击蒙版空白处关闭时，误触底层按钮

用户点蒙版想关弹窗，结果点了蒙版下面的 <button></button>，触发了其他逻辑——这是事件冒泡没截住。

解决方案要兼顾功能与可访问性：

• 蒙版元素绑定 click 事件，内部调用 event.stopPropagation()
• 但关闭逻辑应作用于蒙版自身（比如 event.target === overlayEl），而非监听整个区域
• 额外加一层防御：给蒙版设 pointer-events: auto，弹窗内容区设 pointer-events: auto，其余区域保持 pointer-events: none（更精准）
• 键盘用户按 Esc 关闭时，确保焦点回到触发按钮，而不是丢失在页面某处

移动端 Safari 上蒙版滚动穿透问题

iOS Safari 有个经典 bug：蒙版显示后，手指在蒙版上滑动，背景页面仍会跟着滚——视觉上像“穿模”。

这不是 CSS 能单独解决的，必须配合 JS 控制 body 滚动锁：

• 显示蒙版时，记录当前 document.body.scrollTop，然后设 body { position: fixed; top: -scrollTop; width: 100%; }
• 隐藏蒙版时恢复 body { position: static; } 并重置 scrollTop
• 别用 overflow: hidden —— 它在 iOS 上有兼容性问题，且可能影响键盘弹出
• 如果页面已有自定义滚动容器（如 .scroll-container），锁的是那个容器，不是 body

渐隐效果容易被当成“锦上添花”，但实际中 opacity 动画卡顿、z-index 错乱、滚动穿透、键盘焦点丢失，任意一个没处理好，都会让用户觉得“这弹窗很蠢”。真正优雅，是藏在交互细节里的克制和确定性。