将一个元素放置在 #top-layer 上方。

Question

我创建了一个开发工具，并使用z-index使其位于所有其他元素之上：

.devTool {
  position: fixed;
  z-index: 99999;
}

不幸的是，当模态<dialog />元素以modal模式打开时，这将会中断。

用户将无法再与.devTool进行交互。

原因是新的#top-layer概念位于所有元素的顶部： https://developer.chrome.com/blog/what-is-the-top-layer/

是否有任何方法可以确保我的devTool始终位于所有元素的顶部（即使那些是模态对话框）并保持互动？

- jantimon

---

这个回答解决了你的问题吗？是否可能将一个div定位在不是其父元素的<dialog>标签之上？ - InspectorGadget

不 - 我正在寻找一种方法，始终保持在最顶层，而不会禁用其他元素的交互功能。 - jantimon

Answer 1

据我所知，这是不可能的。根据W3C规范草案：

注意：顶层由用户代理完全管理；作者无法直接操作它。

唯一的方法似乎是使用一个在顶层渲染的元素...也许.devTools本身可以被包裹在一个放置在最后的

元素中？根据同样的规范：

顶层元素按照它们在顶层出现的顺序进行渲染；顶层中的最后一个元素会显示在其他所有元素之上。

此外，请记住你的解决方案可能因为另一个原因而失败：z-index值是相对于堆叠上下文的，所以在更高的堆叠上下文中具有较小z-index值的元素可能会显示在你的元素之上。

- mrtnmgs

---

太可惜了...听起来像是浏览器供应商在不与网页开发人员沟通的情况下推动功能。在这里，zIndex非常有效 - 给body元素添加一个覆盖层，给它一个较高的z-index，pointer-events:none，它将始终位于顶部。 - jantimon

太可悲了...听起来像是浏览器供应商在不与网页开发人员沟通的情况下推动功能。zIndex在这里非常有效-将一个覆盖层添加到body元素上，给它一个较高的z-index，pointer-events:none，它将始终位于顶部。 - jantimon

@jantimon 是的，就是这样说的。这意味着我不能使用<dialog>来显示错误信息。（因为我不能用更新对话框覆盖它作为 PWA。） - Leo

Answer 2

如果你想将 .divTool 放在对话框的上方，你可以创建另一个对话框，并将 .divTool 元素放入其中，然后调整代码，使得第一个对话框打开时第二个对话框也会打开。这样，最后打开的对话框将位于所有元素的上方。 阅读这篇文章以了解有关对话框和顶层的更多信息： 前端 UI 对话框中的顶层和 Z-Index 区别

- mohamed khaled

Answer 3

你可以使用.show()而不是.showModal()来取消模态<dialog>，之后它将遵循常规的堆叠规则，z-index将再次生效。

- silverwind