我创建了一个开发工具，并使用z-index在所有其他元素之上：
.devTool {
position: fixed;
z-index: 99999;
}不幸的是，一旦在modal模式下打开了一个模态<dialog />元素，这个问题就会被打破。
用户无法再与.devTool进行交互。
原因是所有元素之上的新#top-layer概念：https://developer.chrome.com/blog/what-is-the-top-layer/
有没有什么方法可以确保我的devTool总是在所有元素的顶部（即使那些是模态对话框）并保持交互？
2条答案
按热度按时间6rvt4ljy1#
据我所知这是不可能的。根据W3C规范草案：
注意：顶层完全由用户代理管理;它不能被作者直接操纵。
唯一的方法似乎是使用在顶层渲染的元素...也许
.devTools本身可以 Package 在一个<dialog>中，作为最后一个元素？从相同的规格：顶层元素按照它们在顶层中出现的顺序呈现;顶层中的最后一个元素被呈现在其它所有元素之上。
还请记住，您的解决方案可能会因另一个原因而失败：
z-index的值是相对于stacking context的，因此在较高的堆栈上下文中，较小的z索引值可能会位于元素的顶部。s4chpxco2#
如果你想把.divTool放在对话框上面，你可以创建另一个对话框，把.divTool元素放在其中，然后调整代码，打开第二个对话框，每当第一个对话框打开，这将使最后打开的对话框在所有元素之上。请参阅这篇文章以了解更多关于对话框和顶层Top Layer vs Z-Index for Frontend UI Dialogs