最顶层:Z-index:10000 的解决方案

在浏览器视口中,顶层位于其相关 document 的上方,每个 document 都有一个关联的顶层。这意味着,提升到顶层的元素无需担心 z-index 或 DOM 层次结构。它们还会获得一个简洁的 ::backdrop 伪元素,供您使用。Fullscreen API 规范会详细介绍 Fullscreen,因为在dialog 支持出现之前,它是使用顶层的绝佳示例。

顶层有助于解决在 document 的其余部分上方呈现内容的问题。

重要提示: - 顶层位于 document 流程之外。 - z-index 对顶层没有影响。 - 顶层中的每个元素都有一个可设置样式的 ::backdrop 伪元素。- 每个元素和 ::backdrop 都会生成新的堆叠上下文。- 顶层中的元素按照元素在集中的显示顺序进行堆叠。最后一个添加的标签页会显示在顶部。如果您想提升某个元素,请先将其移除,然后重新添加。

到目前为止,我们是如何模拟顶层的?开发者在 body 末尾丢失空容器元素的情况并不少见。然后,这将用作“仿真”顶层。其基本思想是,此容器会位于堆栈中的所有其他内容之上。当您想将某项内容置于所有其他内容之上时,可以将其附加到该容器。我们可以在 SweetAlertreactjs-popupMagnific Popup 等热门软件包中看到这种情况。

借助 <dialog>“弹出式窗口”等新的内置组件和 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> 应用任何样式,即可使其显示在所有其他内容上方。

开发者工具

这就是开发者工具支持。Chrome 开发者工具将支持顶层元素,以便您检查顶层。这样更便于调试和可视化内容在顶层的堆叠情况,甚至是顶层的堆叠情况。

展示开发者工具顶层支持的 GIF

Alina Varkki 撰写了一篇精彩的文章,详细介绍了如何使用这些工具。目前,这些功能在 Chrome Canary 版 105 中以预览版的形式提供。

大功告成!

顶层的简要介绍。让你能够对以下内容说“再见”:

.popup-container {
  z-index: 10000;
}

您会将什么内容推送到顶层?你试用过 dialog 吗?或者已查阅 OpenUI Popover API?请告知我们!