dialog必须是body直接子元素才能获得正确z-index层级，否则z-index失效、::backdrop不渲染、showModal()可能失败；多层弹窗实为调用顺序切换而非z-index堆叠；其z-index仅控制与backdrop的相对顺序，且需手动处理Safari兼容性与焦点恢复。
dialog必须是body直接子元素才能获得正确z-index层级
浏览器只在dialog是document.body的直接子节点时，才将其推入“顶层渲染层”（top layer），此时z-index才真正生效。嵌套在<div id="app">、<code><main></main>或任何带transform/position: relative的容器里，dialog就退化为普通流内元素——z-index被忽略，::backdrop不渲染，showModal()可能静默失败或抛DOMException。
常见错误写法：
<body>
<div class="app">
<dialog id="modal"></dialog> <!-- ❌ 不进顶层，z-index无效 -->
</div>
</body>正确写法（唯一可靠结构）：
<body> <dialog id="modal"></dialog> <!-- ✅ 直接挂载 --> <div class="app"></div> </body>
- 用 React/Vue 时，必须手动执行
document.body.appendChild(dialogEl)，不能靠组件树渲染 - 不要给父容器加
transform: translateZ(0)或will-change，Safari 17.6+ 会直接导致弹窗错位或消失 -
dialog自身禁止设position: absolute或transform，否则::backdrop坐标偏移
多层弹窗不是靠z-index堆叠，而是靠showModal()调用顺序
浏览器任意时刻只允许一个元素处于顶层渲染层，第二个showModal()调用会失败（Chrome 报 "The element is already in a top layer"）。所谓“多层”，其实是视觉衔接而非 DOM 堆叠——没有 z-index 层级竞争，只有调用先后决定谁在最前。
立即学习“前端免费学习笔记（深入）”；
真实层级逻辑：
- 第一次调用
dialog1.showModal()→ dialog1 进顶层 - 关闭 dialog1 后，再
dialog2.showModal()→ dialog2 进顶层（不是“盖在上面”，而是“换人”） - 无法同时存在两个
open的模态dialog
若强行想模拟多层，唯一安全做法是：
dialog1.close();
setTimeout(() => { dialog2.showModal(); }, 0);注意：这仍是单层切换，不是并发模态；别监听 click 或 keydown 来模拟关闭，必须等 close 事件触发后再打开下一个。
dialog自身的z-index只控制它和backdrop的相对顺序
dialog 的 z-index 不影响它与页面其他元素的层级关系——因为一旦 showModal() 成功，它就被强制提升到浏览器最高层（高于所有 CSS z-index），你设 z-index: 9999 和 z-index: 1 效果完全一样。
它的实际作用仅限于两点：
- 控制
dialog内容和自身::backdrop的绘制顺序（dialog必须高于::backdrop） - 当多个
dialog共存但都未showModal()时，决定它们默认堆叠顺序（几乎无实际意义）
所以没必要纠结数值大小。只需确保：
dialog {
z-index: 100; /* 只需比 backdrop 高即可 */
}
dialog::backdrop {
z-index: 99; /* backdrop 必须低于 dialog */
}更关键的是：别用 getComputedStyle(dialog).zIndex 判断当前哪个在顶层——它永远返回空字符串，浏览器不暴露该信息。
移动端和Safari的层级陷阱必须手动兜底
iOS Safari 16.4+ 才完整支持 showModal()，且对父容器异常敏感：只要 body 或其祖先有 overflow: hidden 或 transform，弹窗就可能被裁剪、偏移，甚至焦点逃逸。这不是 bug，是渲染层限制。
安全实践清单：
- 运行时检测：
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype，不通过则全量降级为div[role="dialog"]+ 手动管理焦点/esc/backdrop - 避免在
dialog外套overflow: hidden容器（包括html或body） - Safari ≤16.3 中，
dialog::backdrop默认透明，必须显式设background: rgba(0,0,0,0.5) - 点击遮罩关闭时，Safari 里
e.target === dialog不可靠，需 fallback 到坐标判断：e.clientX < dialogRect.left || e.clientY < dialogRect.top
最易被忽略的一点：关闭后焦点不会自动回到触发按钮，必须手动 triggerBtn.focus()，否则键盘用户卡死在空白处。
