:modal 不能用于定位对话框，它仅是匹配 showModal() 调用后 dialog 元素的状态伪类，无定位能力；必须配合 position: fixed 和 inset: 0 才能实现全屏覆盖与视口锚定。
为什么 :modal 不能用来“定位”对话框
:modal 是一个状态伪类，不是定位工具。它只在 <dialog> 调用 showModal() 后匹配该元素本身，不提供 top、left、transform 等定位能力。试图写 dialog:modal { position: fixed; top: 0; } 是无效的——它只是给已存在的模态 <dialog> 加样式，但定位逻辑必须由其他 CSS 规则承担。
dialog:modal 必须搭配 position: fixed 才能全屏覆盖
原生 <dialog> 默认是 position: absolute，且定位基准是最近的「已定位祖先」，极易错位。要实现真正全屏、不随滚动偏移的效果，必须显式设为 fixed：
-
dialog:modal规则里必须包含position: fixed，不能依赖默认行为 - 配套设置
inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0），确保铺满视口 - 若需居中内容，不要在
:modal里写transform居中——那是对<dialog>自身的尺寸操作；应把内容容器（如<div class="dialog-body">）用display: flex居中 -
z-index建议设为2147483647，避免被第三方 SDK 弹窗遮盖
遮罩层（::backdrop）和定位无关，但常被误当成定位手段
dialog::backdrop 只控制半透明遮罩样式，不影响 <dialog> 的位置。常见错误包括：
- 以为给
::backdrop设background就能“撑开”对话框——其实它只是叠加层，无尺寸 - 在
::backdrop里写position: fixed或inset: 0是多余的，浏览器自动处理 - 遮罩点击穿透问题：默认
::backdrop不响应事件，如需点击关闭，得加dialog::backdrop { cursor: pointer; }并在 JS 中监听click判断是否点在 backdrop 上
兼容性与触发条件比样式更关键
哪怕 CSS 写得再准，:modal 不生效就一切归零。最容易忽略的硬性前提：
立即学习“前端免费学习笔记（深入）”；
- 必须用
dialog.showModal()触发，dialog.show()或open = true都不匹配:modal - 同一时间页面只能有一个
:modal匹配目标——连续调用showModal()会替换栈顶，旧的立即失活 - Chrome 105+ / Firefox 103+ / Safari 15.6+ 支持，但 Safari 对
inset的支持略滞后，建议降级为top: 0; right: 0; bottom: 0; left: 0 - 不要把
<dialog>套在position: relative容器里再指望:modal修复定位——fixed已脱离文档流，祖先定位属性完全无效
:modal 这个选择器本身，而是你有没有在它生效前，就用 position: fixed 和 inset: 0 把基础定位钉死。其余所有居中、遮罩、关闭逻辑，都是在这个锚点上叠加的。 
