如何为HTML dialog元素设置固定层级顺序？

HTML的<dialog>元素依赖**顶层（top layer）**控制层级，而非z-index，顶层内的元素顺序直接决定显示层级——后加入的元素会显示在更上方。要确保dialog A始终在B之上，可通过以下方法实现：

• 控制显示调用顺序
  确保dialog A的showModal()或show()方法总是在dialog B之后调用。如果B已经处于显示状态，可先关闭B再打开A，或者调整代码逻辑让A的显示操作晚于B。

• 手动调整顶层集合顺序
  浏览器提供document.topLayer接口，它是一个有序集合，元素顺序对应顶层的显示层级。可以将dialog A从集合中移除后重新添加，使其移到集合末尾，从而显示在最上方：

  // 假设dialogA、dialogB为已显示的dialog元素
  if (document.topLayer.has(dialogA)) {
    document.topLayer.delete(dialogA);
    document.topLayer.add(dialogA);
  }
  

• 注意模态与非模态的一致性
  无论使用showModal()（模态）还是show()（非模态），顶层的层级规则都适用，只要保证A在顶层集合中的顺序晚于B即可。

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