我正在页面上构建一个小型浮动通知库,但出现了问题,因为在我将使用它的页面上有各种浮动元素,例如来自第三方插件的模态和按钮。
第一个解决方案是使用高值,所以z-index
让我们说:
.floating-notification {
z-index: 10000;
}
但问题是,作为一个固定数字并不能保证它是最大的,因为第三方库中的某个人可能已经想到了一个更大的数字,比如说10001,所以如果两个组件一起显示,则创建的那个将在下面显示。
另一种强制解决方案是使用最大允许值,z-index
但这会因浏览器而异,并且不是标准的。
问题是是否有任何方法可以知道 DOM 的所有元素,即 z-index 属性的最大值。
以下声明:
以及以下问题:
它们并不完全兼容。没有必要找到
z-index
整个文档的最大值,因为它z-index
定义了一个堆叠上下文。属于不同堆叠上下文的两个元素不能通过它们的比较
z-index
考虑以下示例,取自 MDN 网络:
在其中,您可以看到即使它
DIV #4
有一个z-index: 6
,它也不是DIV #1
用z-index: 5
然后,您只对要在其上绘制内容的节点的直接子节点感兴趣。
可以帮助您执行此操作的代码如下:
您可以在以下代码段中对其进行测试:
没有优雅的方法可以做到这一点,您必须查看所有元素并坚持使用最高的 z-index:
没有本机功能或类似的功能,您必须手动完成。我把这个例子留给你用 Jquery,因为你已经有一个 Javascript 的例子,你用起来会更舒服。