如何计算文档中最高的z-index？

Question

为了将包含透明文本图像的div设置为我文档中的最高z-index,我选择了数字10,000,它解决了我的问题.

以前我猜过3号但是没有效果.

那么,是否有更科学的方法来确定哪个z-index高于所有其他元素？

我试图在Firebug中寻找这个指标但却找不到它.

Answer 1

为了清楚起见,从代码站点窃取一些代码:

  var maxZ = Math.max.apply(null, 
    $.map($('body *'), function(e,n) {
      if ($(e).css('position') != 'static')
        return parseInt($(e).css('z-index')) || 1;
  }));

Answer 2

您可以调用findHighestZIndex特定的元素类型,例如'DIV',如下所示:

findHighestZIndex('div');

假设一个findHighestZindex定义如下的函数:

function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = 0;
  for (var i = 0; i < elems.length; i++)
  {
    var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
    if ((zindex > highest) && (zindex != 'auto'))
    {
      highest = zindex;
    }
  }
  return highest;
}

Answer 3

使用ES6更清洁的方法

function maxZIndex() {

     return Array.from(document.querySelectorAll('body *'))
           .map(a => parseFloat(window.getComputedStyle(a).zIndex))
           .filter(a => !isNaN(a))
           .sort()
           .pop();
}

Answer 4

我想添加我在我的用户脚本之一中使用的 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"值。