在浏览器视口中，顶层位于其相关 document 的上方，每个 document 都有一个关联的顶层。这意味着，提升到顶层的元素无需担心 z-index 或 DOM 层次结构。它们还会获得一个简洁的 ::backdrop 伪元素，供您使用。Fullscreen API 规范进行了更加详细的介绍，因为在 dialog 支持问世之前，Fullscreen 就是使用中的顶层的一个极佳示例。
顶层有助于解决在 document 其余部分之上呈现内容的问题。
重要注意事项：
- 顶层在 document 流之外。
- z-index 对顶层没有影响。
- 顶层中的每个元素都有一个可设置样式的 ::backdrop 伪元素。
- 每个元素和 ::backdrop 都会生成一个新的堆栈上下文。
- 最上层中的元素按照它们在集中的显示顺序进行堆叠。最后一个位置显示在最上方。如果您想提升某个元素，请先将其移除，然后重新添加。
到目前为止，我们是如何模拟顶层的？开发者在 body 末尾丢失空容器元素的情况并不少见。然后，它就会被当作“伪造品”最上层。具体思路是，此容器应置于堆栈中的其他所有项之上。如果您希望在宣传其他产品或服务时优先推广某些内容，则可以将其附加到相应的容器中。在 SweetAlert、reactjs-popup、Magnific Popup 等热门软件包中，我们可以看到这一点。
借助新的内置组件和 API（例如 <dialog> 和 “Popover”），您无需采取这些解决方法。您可以将内容提升到顶层。
借助界面框架，我们可以将提升的元素与其对应的组件放在一起。但是，在渲染时，它们经常在 DOM 中分开。
通过使用顶层，您可以在源代码中放置提升的元素（例如 <dialog>）。元素在 DOM 中的下一层无关紧要。它会提升到顶层，您可以在预期位置对其进行检查，并将其与组件 HTML 置于同一位置。这样可以更轻松地在 DOM 中同时检查触发器元素和提升的元素。例如，当触发器元素正在进行属性更新时尤其有用。由于这些元素位于同一位置，这还有利于无障碍功能。
为了说明顶层与高 z-index 的区别，请参考以下演示。
在此演示中，您可以打开一个 SweetAlert 弹出式窗口，还可打开顶层 <dialog>。打开 <dialog>，然后尝试打开 SweetAlert 弹出式窗口。您会看到它出现在顶层元素下方。SweetAlert 弹出式窗口的根使用的是值为 10000 的 z-index 以及 position: fixed。
.swal-overlay {
z-index: 10000;
position: fixed;
}
您无需对 <dialog> 应用任何样式，即可使其显示在所有其他内容之上。
开发者工具
这就是开发者工具支持。Chrome 开发者工具将添加对顶层元素的支持，以便您可以检查顶层。这样可以更轻松地调试和可视化内容在顶层的堆叠情况，甚至是顶层的堆叠情况。
Alina Varkki 有一篇精彩的文章详细介绍了如何使用这些工具。在 Chrome Canary 105 版中，它们目前以预览功能的形式提供。
大功告成！
顶层简要介绍。可以说“再见！”更改为：
.popup-container {
z-index: 10000;
}
您会向顶层推送什么内容？你试用过 dialog 吗？或者已查阅 OpenUI Popover API？请告知我们！