在浏览器视口中，顶层位于与其相关的 document 的上方，并且每个 document 都有一个关联的顶层。这意味着，提升到顶层的元素无需担心 z-index 或 DOM 层次结构。它们还会获得一个整洁的 ::backdrop 伪元素。Fullscreen API 规范进行了详细说明，因为在 dialog 支持出现之前，Fullscreen 就是一个很好的顶层示例。
顶层有助于解决在 document 其余部分之上渲染内容的问题。
需要注意的要点：
- 顶层位于 document 流之外。
- z-index 在顶层没有任何影响。
- 顶层中的每个元素都有一个可设置样式的 ::backdrop 伪元素。- 每个元素和 ::backdrop 都会生成一个新的堆叠上下文。- 顶层中的元素会按照它们在集中的出现顺序进行堆叠。最后一个广告单元显示在顶部。如果您想要提升某个元素，请将其移除，然后重新添加。
到目前为止，我们是如何模拟顶层的？开发者在 body 末尾丢弃空容器元素是很常见的情况。然后，它将用作“人造”顶层。具体思路是，此容器位于堆栈中所有其他内容之上。如果您想优先宣传某些内容，可以将这些内容附加到相应的容器中。我们可以看到 SweetAlert、reactjs-popup、Magnific Popup 等热门软件包。
使用 <dialog> 和“Popover”等新的内置组件和 API 后，您就不需要采用这些权宜解决方法了。您可以将内容提升到顶层。
利用界面框架，我们可以将提升的元素与对应的组件元素放在一起。但是，当涉及到渲染时，它们经常在 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> 应用任何样式，即可让其显示在所有其他内容上方。
DevTools
以上就是对开发者工具的支持Chrome 开发者工具将添加对顶层元素的支持，以便您检查顶层。这样可以更轻松地调试和直观呈现内容在顶层或顶层中的堆叠情况。
Alina Varkki 发表了一篇很棒的文章，深入介绍了如何使用这些工具。此功能目前以预览版功能的形式在 Chrome Canary 版本 105 中提供。
大功告成！
顶层简介。让用户可以对如下内容说“拜拜！”：
.popup-container {
z-index: 10000;
}
您会向顶层推送什么？你试用过 dialog 吗？或者，已查看 OpenUI Popover API？请告知我们！