通过使用 元素的 .show() 方法（而非 .showModal()），可创建不阻断页面交互的非模态对话框，使其支持在其上方叠加下拉菜单等浮动元素。
通过使用 `
在 Web 开发中，常遇到这样的需求：当一个模态对话框（由 dialog.showModal() 触发）打开时，页面其余部分被禁用、焦点被强制捕获，此时任何下拉控件（如 衍生组件）都无法正常交互——即使设置了高 z-index 也无效，因为模态层本质上是渲染层级与交互逻辑双重隔离的。
根本原因在于：
✅ .showModal() 创建的是 true modal —— 浏览器会自动将它置于最高堆叠上下文（stacking context），并阻止所有背景元素获得焦点、响应点击或悬停；
❌ .show() 创建的是 non-modal dialog —— 它仅是一个带 backdrop 的普通浮动容器，不劫持焦点、不封锁交互，因此其 z-index 可被其他元素（如 position: absolute 的下拉菜单）合法超越。
✅ 正确实践：用 .show() 替代 .showModal()
<dialog id="popup"><fieldset>
<legend>提示窗口</legend>
<p>这是一个非模态对话框，页面仍可滚动、点击、聚焦其他元素。</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</fieldset></dialog><details id="dropdown"><summary>▾ 下拉菜单</summary><nav><ul>
<li><a href="#item1">选项 1</a></li>
<li><a href="#item2">选项 2</a></li>
<li><a href="#item3">选项 3</a></li>
</ul></nav></details>
const popup = document.getElementById("popup");
// 打开为非模态对话框（允许下拉菜单覆盖其上）
document.getElementById("openDlgBtn").onclick = () => popup.show();
// 若需模态行为，则显式调用 showModal()（但此时下拉菜单将不可用）
// document.getElementById("openModBtn").onclick = () => popup.showModal();
? 样式关键点（确保层级可控）
/* 非模态 dialog 自身不强制最高层级 */
#popup {
z-index: 1000; /* 可被更高值覆盖 */
position: absolute;
}
/* 下拉菜单需显式声明更高 z-index，并脱离父容器 stacking context */
#dropdown {
position: absolute;
z-index: 1001; /* 必须 > dialog 的 z-index */
top: 100%; /* 紧贴 summary 下方 */
width: max-content;
}
/* 避免被 dialog::backdrop 意外遮挡 */
#popup::backdrop {
background: rgba(0, 0, 0, 0.3);
/* backdrop 默认 z-index 为 -1，不影响内容层叠 */
}
⚠️ 注意事项
-
不要混用
open属性与 JS 方法：在页面加载时即激活，但无法控制模态/非模态行为；始终优先使用.show()或.showModal()显式控制。 -
焦点管理需手动处理：
.show()不自动聚焦，若需键盘导航支持，请在popup.show()后调用popup.focus()并合理设置tabindex。 -
移动端兼容性：
在 Safari 中需启用实验性功能（iOS 16.4+ / macOS 13.3+ 原生支持），旧版可降级为div+aria-modal实现。 -
避免嵌套模态：
内再调用.showModal()会导致未定义行为，浏览器可能忽略或报错。
✅ 总结
要让下拉菜单、工具提示、日期选择器等浮动组件在对话框上方正常工作，核心不是“强行提高 z-index”，而是放弃模态语义，改用非阻塞式 .show()。这既符合无障碍规范（用户可自由切换焦点），又保持 DOM 结构清晰、CSS 层级可控，是现代 Web 对话框设计的最佳实践。
