<dialog>默认不响应z-index，因其天生处于高优先级堆叠上下文；需确保其为body直接子元素、移除父级隔离样式或手动移入body来解决遮挡问题。
<dialog> 标签默认不参与 z-index 层级竞争，它天生是“悬浮态”，但它的渲染层级由浏览器内部堆叠上下文决定，**不能直接用 CSS 的 z-index 覆盖它**——强行加 z-index 无效，除非你先改它的 position，而这会破坏语义和可访问性。
为什么给 <dialog> 加 z-index 没反应？
因为 <dialog> 默认是 position: unset（不是 static，也不是 absolute），且浏览器为它自动创建了一个独立的、高优先级的堆叠上下文（类似 fixed 元素）。此时：
• 写 z-index: 9999 会被忽略（DevTools 中显示为 auto）
• 它的层级由是否 open、是否在 <body> 下、以及是否被父级 transform/opacity 锁死共同决定
• 常见现象：弹出后被 iframe、position: fixed 的导航栏、或带 will-change: transform 的容器盖住
真正有效的层级控制方式
不用动 z-index，靠三类操作调整实际渲染顺序：
- 确保
<dialog>是<body>的直接子元素（或至少没有中间层触发新堆叠上下文） - 移除父容器上可能创建隔离上下文的样式，比如：
opacity: 0.99、transform: translateZ(0)、will-change: transform - 对遮罩层（如果手写）用
position: fixed+ 显式z-index，并确认它和<dialog>处于同一 DOM 级别（例如都挂载到document.body）
示例修复结构：
立即学习“前端免费学习笔记（深入）”；
<!-- ✅ 推荐：dialog 直接在 body 下 --> <body> <main>...页面内容...</main> <dialog id="myDialog">...</dialog> </body> <p><!-- ❌ 风险：被父级 opacity 锁死 --> <div style="opacity: 0.99"> <dialog>...</dialog> </div>
与 iframe 或第三方组件共存时的硬解法
当 <dialog> 仍被盖住（尤其在嵌入式场景中），说明它被卡在某个父级堆叠上下文里出不来。这时必须脱离原有 DOM 树：
- 用 JavaScript 把
<dialog>移动到document.body底部：document.body.appendChild(dialogEl) - 若需动态定位（如居中），不要依赖
position: absolute，改用position: fixed+top/left计算 - 避免用
Teleport（Vue）或createPortal（React）包裹原生<dialog>—— 它们移动的是虚拟 DOM，不保证真实 DOM 层级提升
关键点：浏览器只认最终渲染时的 DOM 位置和祖先样式，不认框架的“逻辑位置”。
最常被忽略的是：你以为 <dialog> 是“最高层”，但它可能正被一个 z-index: 0 + position: relative 的父容器悄悄关进小黑屋——检查它的所有祖先节点，比调 z-index 数值重要十倍。
