为何HTML dialog始终置顶？如何让div显示在dialog上层？

核心原因：
原生<dialog>调用showModal()后，会被浏览器放入顶层叠上下文（Top Layer），这个上下文的优先级高于所有普通z-index控制的元素，所以你给.box设置的z-index再高也无法覆盖它。

下面是几种可行的解决方案：

方案一：放弃模态特性，改用非模态Dialog #

如果不需要Dialog的模态遮罩、焦点锁定这类特性，用show()方法打开Dialog即可。此时Dialog会回到普通层叠上下文，调整z-index就能让.box覆盖它：

section {
  position: relative;
  width: 500px;
  height: 500px;
}

dialog {
  width: 400px;
  height: 400px;
  background: #ccc;
  position: relative;
  z-index: 1; /* 低于.box的z-index */
}

.box {
  z-index: 888;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 200px;
  background: tomato; /* 加背景方便观察效果 */
}

<section>
  <dialog id="myDialog">
    <p>Text</p>
  </dialog>
  <div class="box"></div>
</section>

<script>
  // 用show()而非showModal()打开Dialog
  document.getElementById('myDialog').show();
</script>

方案二：将目标元素也放入顶层叠上下文 #

如果必须保留Dialog的模态特性，可通过JS将.box移到顶层叠上下文，脱离原来的层级限制：

section {
  position: relative;
  width: 500px;
  height: 500px;
}

dialog {
  width: 400px;
  height: 400px;
  background: #ccc;
}

.box {
  position: fixed; /* 固定定位避免跟随页面滚动 */
  top: 10px;
  left: 10px;
  width: 200px;
  height: 200px;
  background: tomato;
}

<section>
  <dialog id="myDialog">
    <p>Text</p>
  </dialog>
  <div class="box" id="myBox"></div>
</section>

<script>
  const dialog = document.getElementById('myDialog');
  const box = document.getElementById('myBox');
  
  dialog.showModal();
  // 将.box移到html根节点下，进入顶层叠上下文
  document.documentElement.appendChild(box);
</script>

方案三：用自定义元素模拟Dialog #

如果原生Dialog的层级限制太麻烦，直接用div模拟模态框效果，完全由z-index控制层级：

section {
  position: relative;
  width: 500px;
  height: 500px;
}

.custom-dialog {
  position: absolute;
  width: 400px;
  height: 400px;
  background: #ccc;
  z-index: 100;
}

.box {
  z-index: 888;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 200px;
  background: tomato;
}

<section>
  <div class="custom-dialog">
    <p>Text</p>
  </div>
  <div class="box"></div>
</section>

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