在浏览器视口中,顶层位于与其相关的 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?请告知我们!