原生 <dialog> 的 z-index 由浏览器硬编码为顶层，不可通过 CSS 覆盖；必须作为 body 直接子节点才能启用完整模态行为；多层弹窗需 JS 栈管理而非 z-index 叠加；与第三方弹窗库共存会导致冲突。
dialog 的 z-index 是浏览器硬编码的，不能靠 CSS 覆盖
原生 <dialog> 在 showModal() 触发后，会被浏览器自动插入一个隐式高优先级的 ::backdrop，其 z-index 在 Chrome 中是 2147483647（即 MAX_SAFE_INTEGER），Firefox 和 Safari 也采用同等级别策略。你写 z-index: 999999 给 <dialog> 自身，或给它的父容器加 z-index，全无效——因为浏览器根本不走 CSS 层叠逻辑，而是直接把它塞进“顶层层叠上下文”（top layer）。
常见误操作包括：
- 给
<dialog>加position: absolute或transform：会导致::backdrop错位甚至消失 - 把
<dialog>套在div里再设z-index：父容器触发新堆叠上下文，<dialog>被困在里面，永远盖不住外部元素 - 用 DevTools 查看 computed
z-index：始终显示auto，这不是 bug，是设计如此
dialog 必须挂载在 body 下，否则 backdrop 和焦点锁定失效
<dialog> 只有作为 document.body 的**直接子节点**时，浏览器才会激活完整模态行为：注入 ::backdrop、捕获 Tab 焦点、响应 Esc、拦截点击穿透。嵌套在任何带 position、transform、opacity 的容器里，都会静默降级为普通 display: block 元素。
框架用户尤其要注意：
立即学习“前端免费学习笔记（深入）”；
- React/Vue/Svelte 渲染出的
<dialog>默认在组件 DOM 树内，必须用useEffect/onMounted/useEffect手动document.body.appendChild() - Vue 3 推荐用
<Teleport to="body">，但需确保 teleport 目标是body，不是某个 class 选择器 - Shadow DOM 内的
<dialog>完全不工作——生命周期中断，showModal()抛DOMException
多层弹窗不是靠 z-index 叠加，而是靠 showModal() 调用顺序和栈管理
浏览器任意时刻只允许一个元素处于 top layer，dialog1.showModal(); dialog2.showModal(); 第二行必然报错：DOMException: The element is already in a top layer。这不是兼容性问题，是 HTML 规范强制限制。
所谓“多层”，实际是视觉模拟+状态栈管理：
- 复用单个
<dialog>，用 JS 动态替换innerHTML，并维护一个数组如dialogStack = []记录历史内容 - 每次切换前手动调用
dialog.querySelector('[autofocus]')?.focus()，否则键盘用户卡在上一层 - 关闭时监听
close事件（不是click），从栈中splice()移除对应项 - 不要依赖
document.querySelector('dialog[open]')判断哪层在顶——它只返回 DOM 中第一个匹配项，不反映真实 top layer 顺序
与第三方弹窗库共存时，唯一安全做法是禁用原生 dialog
Bootstrap Modal、Ant Design Dialog、Element Plus 等库都靠 z-index + body.inert + 手动 focus trap 实现，它们和原生 <dialog> 的机制根本冲突。同时存在时会出现：
- 遮罩层错位或不显示（两个 backdrop 同时竞争）
- 焦点在两个弹窗间乱跳（原生 trap 和手写 trap 互相干扰）
- Esc 键被其中一个吞掉，另一个关不掉
如果项目已重度依赖某弹窗库，就别强行混用 <dialog>；若坚持用原生方案，必须全局移除所有第三方弹窗相关 CSS 类、JS 监听器，并确保 body 上没有残留的 inert 或 aria-hidden。
最常被忽略的一点：dialog 打开后，页面其他区域仍可能响应全局 keydown（比如你在 body 上绑了 Ctrl+S 保存），这和焦点锁定无关——浏览器只围栏 Tab 流，不屏蔽事件冒泡。得自己加条件判断，或临时解绑。
