根本原因是dialog未调用showmodal()或调用失败：必须是body直接子元素、dom就绪后执行、父容器无transform/overflow:hidden；::backdrop仅支持background等有限样式；点击遮罩需手动监听；关闭必须用close()。

dialog 标签不遮挡底部元素，根本原因不是 CSS 层级没调高，而是它压根没“启动”模态行为——showModal() 没被调用，或调用了但执行失败。

为什么 dialog 看起来像没遮罩？

常见现象：弹窗内容出来了，但底下按钮还能点、滚动条能动、Tab 键照常切换到页脚。这不是样式问题，是语义没激活。

• <dialog open></dialog> 或 dialog.open = true 只让内容“可见”，不生成 ::backdrop，也不锁交互
• dialog.show() 同样无效：无遮罩、无焦点围栏、Esc 不响应
• 浏览器 DevTools 里查不到 ::backdrop 节点？说明 showModal() 根本没走通

showModal() 调用失败的三大硬性条件

即使写了 dialog.showModal()，也可能静默失败。必须逐项核对：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• <dialog></dialog> 必须是 的直接子元素——嵌套在 <div id="app"> 或 <code><main></main> 里，Safari 和部分 Chrome 会丢掉 backdrop 层
• 脚本必须在 DOM 就绪后执行：DOMContentLoaded 事件内，或把 <script></script> 放在 前；否则 document.querySelector('dialog') 返回 null
• 父容器不能有 transform、will-change 或 overflow: hidden ——这些会干扰 dialog 的定位与 backdrop 渲染，导致遮罩偏移、裁剪甚至完全不可见

dialog::backdrop 样式写对了但没生效？

伪元素失效，90% 是因为选择器或上下文错位：

• 必须用 dialog::backdrop，不能省略 dialog 前缀（::backdrop 或 .modal::backdrop 全部无效）
• 只支持有限属性：background（推荐 rgba(0,0,0,0.6)）、opacity、backdrop-filter；z-index、margin、padding 会被忽略
• 旧版 Safari（≤15.6）不支持 ::backdrop，需降级：用 dialog-polyfill 或 JS 手动插入遮罩 <div class="backdrop"></div>

点击遮罩不关闭？这不是 bug，是规范没定义

原生 dialog 不提供“点击 backdrop 关闭”功能，必须手动监听并判断点击区域：

• 监听 dialog 元素的 click 事件，检查 event.target === dialogEl（注意：Safari 中该判断不可靠，建议加容错）
• 避免在内部按钮或表单上写 event.stopPropagation()，否则 click 无法冒泡上来
• 移动端要额外加 touch-action: auto 到 dialog::backdrop，否则 iOS Safari 可能穿透点击

最易被忽略的一点：关闭必须用 dialog.close()，而不是删 open 属性或设 open = false——后者会导致 backdrop 残留、close 事件不触发、后续 showModal() 失效。