为了将包含透明文本图像的 div 设置为文档中最高的 z-index，我选择了数字 10,000，它解决了我的问题。
以前我用数字 3 猜过，但没有效果。
那么，是否有更科学的方法来确定哪个 z-index 高于所有其他元素的 z-index？
我尝试在 Firebug 中寻找这个指标，但没有找到。
如何找出文档中最高的 z-index？
IT技术
javascript
html
css
z-index
2021-02-02 01:24:00
6个回答
为了清楚起见，从 abcoder 站点窃取一些代码：
var maxZ = Math.max.apply(null,
$.map($('body *'), function(e,n) {
if ($(e).css('position') != 'static')
return parseInt($(e).css('z-index')) || 1;
}));
您可以调用findHighestZIndex特定的元素类型，例如<div>：
findHighestZIndex('div');
假设一个findHighestZindex定义如下的函数：
function findHighestZIndex(elem)
{
var elems = document.getElementsByTagName(elem);
var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
for (var i = 0; i < elems.length; i++)
{
var zindex = Number.parseInt(
document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
10
);
if (zindex > highest)
{
highest = zindex;
}
}
return highest;
}
使用 ES6 更简洁的方法
function maxZIndex() {
return Array.from(document.querySelectorAll('body *'))
.map(a => parseFloat(window.getComputedStyle(a).zIndex))
.filter(a => !isNaN(a))
.sort()
.pop();
}
我想添加我在我的用户脚本之一中使用的 ECMAScript 6 实现。我正在使用这个来定义z-index特定元素的 ，以便它们始终显示在最高位置。
在 JS 中，您还可以将某些属性或类名设置为您可能想要排除的元素。例如，考虑您的脚本data-highest在要显示为最高元素（例如弹出窗口）的元素上设置属性；并考虑具有yetHigher您无法控制的类名的元素，它应该更高（例如自定义上下文菜单）。我可以使用链式:not选择器排除这些元素。请注意，这:not([data-highest], .yetHigher)是可能的，但处于实验阶段，并且截至 2021 年 1 月仅提供有限的浏览器支持。
let highestZIndex = 0;
// Then later, potentially repeatedly
highestZIndex = Math.max(
highestZIndex,
...Array.from(document.querySelectorAll("body *:not([data-highest]):not(.yetHigher)"), (elem) => parseFloat(getComputedStyle(elem).zIndex))
.filter((zIndex) => !isNaN(zIndex))
);
下面的五行可以多次运行并highestZIndex通过找出当前 highestZIndex值与所有其他元素的所有其他计算 z 索引之间的最大值来重复更新变量。在filter排除所有的"auto"值。
在我看来，解决这个问题的最好方法是，z-index为不同类型的元素使用什么样的es来设置自己的约定。然后，您将z-index通过回顾您的文档找到正确的使用方法。