dialog必须是body直接子元素才能共存；多层需手动维护栈并串行showmodal，禁用嵌套；遮罩点击、焦点、关闭等均需手写兼容逻辑。
dialog必须是body直接子元素才能共存
多个dialog元素可以同时存在于DOM中，但浏览器只认得它们“合法”时才启用模态栈——也就是说，每个dialog都必须是document.body的**直接子节点**。嵌套在div、main、section甚至带transform或position: relative的容器里，会导致：
- ::backdrop不渲染（遮罩缺失）
- showModal()静默失败或抛DOMException
- Tab 键焦点逃逸到背景页
- Safari 下直接错位或白屏
常见错误写法：<div class="app"><dialog></dialog></div>
正确挂载方式（尤其框架中）：document.body.appendChild(dialog)，且需在showModal()前完成。
多层dialog不能靠DOM嵌套，只能靠调用顺序模拟
<dialog><dialog></dialog></dialog>这种结构完全无效——HTML规范禁止任意时刻存在多个“顶层元素”，第二个showModal()必然失败，报错如：Failed to execute 'showModal' on 'HTMLDialogElement': The element is already in a top layer.
这不是z-index问题，是浏览器渲染层硬性限制。所谓“多层”，实际只有两种安全路径：
-
单dialog + 动态内容切换：用
innerHTML或replaceChildren()更新内部结构，配合前进/后退状态管理 -
手动fixed弹层降级：放弃
dialog，改用<div class="modal" role="dialog" aria-modal="true">，自行处理焦点环、<code>Esc、遮罩点击、滚动锁定若坚持用原生
dialog并想视觉衔接下一层，唯一可行做法是：监听当前dialog的close事件，在回调里用setTimeout(() => nextDialog.showModal(), 0)触发下一层——但这仍是串行，非并行堆叠。必须手动维护dialog栈才能识别最顶层
浏览器不提供
document.topLayerElement或类似API，document.querySelector('dialog[open]')只返回第一个匹配项，无法反映真实z-order。真实层级由showModal()调用顺序决定，但DOM中它们只是平级兄弟节点。可靠方案是维护一个数组栈：
- 每次成功调用
showModal()后立即push()该实例 - 必须监听
close事件（不是click或keydown）来splice()移除 - 最顶层即
dialogStack[dialogStack.length - 1]
注意：不要依赖
getComputedStyle(dialog).zIndex，它始终返回空字符串；也不要等open属性变为true再入栈——open只是结果标记，showModal()调用即代表已入栈。关闭逻辑和backdrop点击必须手写且兼容Safari
::backdrop是伪元素，不可绑定事件，也不冒泡，规范明确不支持“点击遮罩自动关闭”。所有关闭逻辑都得自己实现： - 标准监听：dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); })- Safari 15.4–16.3 兼容fallback：if (e.target === dialog || e.clientX dialogRect.right || e.clientY dialogRect.bottom)- 千万别写dialog.addEventListener('click', () => dialog.close())，这会让点击内部按钮也关窗另外，表单提交默认刷新页面，要防闪退：给
form加method="dialog"；异步提交则必须e.preventDefault()后再dialog.close()。这些细节一旦漏掉，多实例管理就立刻崩在用户操作上。 - 每次成功调用
