现代浏览器推荐直接使用 dialog 元素实现全屏遮罩，其 showmodal() 自动处理层叠、滚动禁用和 backdrop 覆盖，::backdrop 天然满屏，点击默认不关闭，esc/tab 键盘支持开箱即用；safari 15.4+ 才完整支持，旧版需 fallback；z-index 失效多因父级隐式层叠上下文，可提级至 body 或加 isolation: isolate；遮罩须显式设 top/left/width/height 为 0/0/100%/100%，避免 100vw/vh 兼容问题；局部遮罩需父容器 position: relative；pointer-events 和 background 透明方式影响交互逻辑，background 应用 rgba/hsla 而非 opacity。
dialog 元素在现代浏览器中已足够可靠，直接用它比手写 div + z-index 更快、更稳；旧版浏览器（如 IE11 或部分安卓 WebView）才需要降级方案。
用 dialog 实现全屏遮罩最简路径
不用算宽高、不操心 z-index 层叠上下文、不手动禁用背景滚动——showModal() 自动搞定所有模态行为。
-
dialog默认创建独立层叠上下文，::backdrop伪元素天然覆盖整个视口，无需position: fixed和100vw/100vh - 点击 backdrop 默认不关闭弹窗，符合“遮罩即阻断”的直觉；如需点击关闭，监听
dialog::backdrop的click事件并调用close() - 键盘支持开箱即用：
Esc关闭、Tab在弹窗内循环聚焦，无障碍基础比手写方案强得多 - 注意：Safari 15.4+ 才完整支持
showModal()；若需兼容 Safari 15.3 及更早版本，得 fallback 到show()+ 手动加inert属性禁用背景
z-index 失效时优先查层叠上下文，不是调数字
遮罩层没盖住目标内容？90% 情况不是 z-index 写小了，而是父容器触发了隐式层叠上下文（比如加了 transform、opacity: 0.99、filter），导致子元素的 z-index 只在内部比较。
- 用浏览器开发者工具的 “Computed” 面板，看遮罩层和被遮盖元素的最近共同祖先是否带
transform或opacity - 临时修复：给那个“意外创建上下文”的父元素加
isolation: isolate，强制它不隔离子层叠顺序（但慎用，可能影响性能） - 长期解法：把遮罩层从 DOM 深处提级到
底部，和页面主体同级，彻底避开嵌套干扰
遮罩层必须显式撑开尺寸，不能靠内容或默认值
空 div 即使 position: fixed 且 z-index 很高，也可能因高度为 0 而“看不见”，尤其当它没子元素或子元素 display: none 时。
- 安全写法统一用：
top: 0; left: 0; width: 100%; height: 100%，而不是依赖100vw/100vh（后者在 iOS Safari 横屏时有兼容问题） - 如果遮罩只盖局部（如某个卡片），父容器必须设
position: relative，遮罩层用position: absolute，否则会相对定位，错位风险极高 - 别信
display: block就能自动撑开——块级元素在无内容、无宽高声明时，高度就是 0
遮罩层要不要响应点击？关键看交互意图
新手常误设 pointer-events: none，结果遮罩形同虚设；但设成 auto 后又发现点不到底下的按钮——问题不在遮罩本身，而在事件流向设计。
- 想让遮罩“只挡不响应”（如 loading 状态），就保持
pointer-events: auto+background: rgba(0,0,0,0.5)，它自然拦截所有穿透事件 - 想让遮罩“点一下就关弹窗”，给它加
click事件并stopPropagation()，避免意外触发底层按钮 - 想实现“点击遮罩外区域关闭”，不要监听
document，而应监听遮罩层自身click并检查event.target === dialog（即点在 backdrop 上）
background 必须带 alpha 通道（如 rgba 或 hsla），用 opacity 会把整个遮罩内容（包括文字、图标）一起变透明，且触发新层叠上下文。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
