如何将非dialog直接子元素置于HTML Dialog模态框之上？

问题根源 #

用showModal()打开原生dialog时，浏览器会把dialog和它的::backdrop放到**顶层浏览上下文（Top Layer）**里。这个层级是浏览器专门为模态、全屏这类需要强制置顶的元素设计的，优先级远高于普通元素的堆叠上下文——哪怕你给普通元素设z-index: 999999也没用，因为不在同一个层级体系里。

两种可行解决方法 #

方法一：不用showModal()，自定义模态逻辑 #

如果不需要原生dialog的强制模态特性（比如自动锁定背景、自动聚焦到dialog内），可以改用show()方法显示dialog，自己手动模拟backdrop，这样所有元素都处于普通堆叠上下文，z-index就能正常生效。

修改后的代码示例：

<div class="onTop">应置于模态框之上</div> 
<button id="openDialog">打开</button>
<dialog id="dialog">
  <button id="closeDialog">关闭</button>
  模态框内容
</dialog>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const dialog = $("#dialog");
const openDialogBtn = $("#openDialog");
const closeDialogBtn = $("#closeDialog");
// 自定义backdrop元素
const backdrop = $('<div class="custom-backdrop"></div>');

openDialogBtn.on("click", function() {
  dialog.show();
  $("body").append(backdrop);
});

closeDialogBtn.on("click", function() {
  dialog.hide();
  backdrop.remove();
});
</script>

<style>
.onTop {
  position: fixed; /* 加上fixed确保定位正确 */
  top: 10px;
  right: 10px; 
  z-index: 1000;
  background-color: yellow;
  padding: 10px;
}

.custom-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgb(0,0,0,0.8);
}

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 998;
  border: none;
  padding: 20px;
}
</style>

方法二：保留showModal()，将置顶元素移入dialog内部 #

如果必须用showModal()的原生特性，那只能把需要置顶的元素放到dialog的内部（因为只有dialog内部的元素才会进入Top Layer）。可以用JavaScript在打开/关闭dialog时动态移动元素，不影响页面结构的常态。

修改后的代码示例：

<div class="onTop" id="onTop">应置于模态框之上</div> 
<button id="openDialog">打开</button>
<dialog id="dialog">
  <button id="closeDialog">关闭</button>
  模态框内容
</dialog>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const dialog = $("#dialog");
const openDialogBtn = $("#openDialog");
const closeDialogBtn = $("#closeDialog");
const onTopEl = $("#onTop");
let originalParent; // 保存元素原来的父节点

openDialogBtn.on("click", function() {
  originalParent = onTopEl.parent();
  dialog.append(onTopEl); // 移到dialog内部
  dialog[0].showModal();
});

closeDialogBtn.on("click", function() {
  dialog[0].close();
  originalParent.append(onTopEl); // 移回原来的位置
});
</script>

<style>
.onTop {
  position: fixed;
  top: 10px;
  right: 10px; 
  z-index: 10; /* 这里只要比dialog内部其他元素高就行，因为都在Top Layer */
  background-color: yellow;
  padding: 10px;
}

dialog::backdrop {
  background-color: rgb(0,0,0,0.8);
}

dialog {
  border: none;
  padding: 20px;
}
</style>

补充说明 #

• Top Layer是浏览器的特殊层级，除了dialog，还有fullscreen元素、popover元素也会进入这个层级。
• 如果需要多个元素在dialog之上，都可以用方法二的思路，动态移入dialog内部。

内容的提问来源于stack exchange，提问作者daryl