html-如何找出文档中最高的z-index?

为了将包含透明文本图像的div设置为文档中的最高z索引,我选择了10,000,它解决了我的问题。

以前我猜过数字3,但没有效果。

因此,是否有更科学的方法来确定哪个z索引比您所有其他元素的z索引高?

我尝试在Firebug中寻找此指标,但找不到。

Charlie Kotter asked 2019-10-08T00:36:31Z
13个解决方案
38 votes

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

  var maxZ = Math.max.apply(null, 
    $.map($('body *'), function(e,n) {
      if ($(e).css('position') != 'static')
        return parseInt($(e).css('z-index')) || 1;
  }));
Jimmy Chandra answered 2019-10-08T00:37:14Z
32 votes

您可以为特定元素类型(例如“ DIV”)调用findHighestZindex,如下所示:

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;
}
flo answered 2019-10-08T00:36:50Z
10 votes

使用ES6更清洁的方法

function maxZIndex() {

     return Array.from(document.querySelectorAll('body *'))
           .map(a => parseFloat(window.getComputedStyle(a).zIndex))
           .filter(a => !isNaN(a))
           .sort()
           .pop();
}
Rajkeshwar Prasad answered 2019-10-08T00:37:37Z
4 votes

在我看来,解决此问题的最佳方法是为各种不同的元素使用哪种z-indexes设置约定。 然后,通过回顾文档可以找到正确的z-index

Gareth answered 2019-10-08T00:38:02Z
4 votes

我相信您正在观察的是Voodoo。 如果没有访问您完整的样式表,我当然不能说清楚。 但令我感到震惊的是,这里真正发生的事情是您忘记了只有定位的元素会受到z-index的影响。

此外,不会自动在样式表中分配z-indexes,这意味着在没有其他z-indexed元素的情况下,z-index:1;将位于其他所有内容之上。

Williham Totland answered 2019-10-08T00:38:35Z
4 votes

我想你必须自己做...

function findHighestZIndex()
{
    var divs = document.getElementsByTagName('div');
    var highest = 0;
    for (var i = 0; i < divs .length; i++)
    {
        var zindex = divs[i].style.zIndex;
        if (zindex > highest) {
            highest = zindex;
        }
    }
    return highest;
}
Philippe Gerber answered 2019-10-08T00:39:00Z
4 votes

没有默认属性或其他任何属性,但是您可以编写一些JavaScript来遍历所有元素并将其找出来。 或者,如果您使用jQuery之类的DOM管理库,则可以扩展其方法(或查找其是否已支持),以便它开始从页面加载中跟踪元素z索引,然后检索最高的z-索引变得很简单。 指数。

Rahul answered 2019-10-08T00:39:26Z
3 votes

我想添加在一个UserScript中使用的ECMAScript 6实现。 我正在使用它来定义highestZIndex的特定元素,以便它们始终显示为最高。 我可以使用链接的highestZIndex选择器排除这些元素。

let highestZIndex = 0;

// 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值与所有元素的所有其他计算的z索引之间的最大值来重复更新变量highestZIndexfilter不包括所有"auto"值。

Sebastian Simon answered 2019-10-08T00:39:59Z
1 votes

我最近不得不为一个项目执行此操作,发现从@Philippe Gerber的出色答案和@flo的出色答案(已接受的答案)中受益匪浅。

与上述参考答案的主要区别在于:

  • CSS #root { background-color: #333; } .first-child { background-color: #fff; display: inline-block; height: 100px; width: 100px; } .second-child { background-color: #00ff00; display: block; height: 90%; width: 90%; padding: 0; margin: 5%; } .third-child { background-color: #0000ff; display: block; height: 90%; width: 90%; padding: 0; margin: 5%; } .nested-high-z-index { position: absolute; z-index: 9999; }和任何内联static样式都将被计算,并使用两者中较大的一个进行比较和计算。
  • 将值强制转换为整数,并且忽略任何字符串值(#root { background-color: #333; } .first-child { background-color: #fff; display: inline-block; height: 100px; width: 100px; } .second-child { background-color: #00ff00; display: block; height: 90%; width: 90%; padding: 0; margin: 5%; } .third-child { background-color: #0000ff; display: block; height: 90%; width: 90%; padding: 0; margin: 5%; } .nested-high-z-index { position: absolute; z-index: 9999; }static等)。

这是代码示例的CodePen,但也包含在此处。

#root {
  background-color: #333;
}

.first-child {
  background-color: #fff;
  display: inline-block;
  height: 100px;
  width: 100px;
}

.second-child {
  background-color: #00ff00;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.third-child {
  background-color: #0000ff;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.nested-high-z-index {
  position: absolute;
  z-index: 9999;
}
#root {
  background-color: #333;
}

.first-child {
  background-color: #fff;
  display: inline-block;
  height: 100px;
  width: 100px;
}

.second-child {
  background-color: #00ff00;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.third-child {
  background-color: #0000ff;
  display: block;
  height: 90%;
  width: 90%;
  padding: 0;
  margin: 5%;
}

.nested-high-z-index {
  position: absolute;
  z-index: 9999;
}
<div id="root" style="z-index: 10">
  <div class="first-child" style="z-index: 11">
    <div class="second-child" style="z-index: 12"></div>
  </div>
  <div class="first-child" style="z-index: 13">
    <div class="second-child" style="z-index: 14"></div>
  </div>
  <div class="first-child" style="z-index: 15">
    <div class="second-child" style="z-index: 16"></div>
  </div>
  <div class="first-child" style="z-index: 17">
    <div class="second-child" style="z-index: 18">
      <div class="third-child" style="z-index: 19">
        <div class="nested-high-z-index">Hello!!! </div>
      </div>
    </div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
  <div class="first-child">
    <div class="second-child"></div>
  </div>
</div>

JohnnyCoder answered 2019-10-08T00:41:09Z
0 votes

使用jQuery:

如果未提供任何元素,则检查所有元素。

function maxZIndex(elems)
{
    var maxIndex = 0;
    elems = typeof elems !== 'undefined' ? elems : $("*");

    $(elems).each(function(){
                      maxIndex = (parseInt(maxIndex) < parseInt($(this).css('z-index'))) ? parseInt($(this).css('z-index')) : maxIndex;
                      });

return maxIndex;
}
Misfer Ali answered 2019-10-08T00:41:38Z
0 votes

如果要显示具有最高z索引的所有元素的ID:

function show_highest_z() {
    z_inds = []
    ids = []
    res = []
    $.map($('body *'), function(e, n) {
        if ($(e).css('position') != 'static') {
            z_inds.push(parseFloat($(e).css('z-index')) || 1)
            ids.push($(e).attr('id'))
        }
    })
    max_z = Math.max.apply(null, z_inds)
    for (i = 0; i < z_inds.length; i++) {
        if (z_inds[i] == max_z) {
            inner = {}
            inner.id = ids[i]
            inner.z_index = z_inds[i]
            res.push(inner)
        }
    }
    return (res)
}

用法:

show_highest_z()

结果:

[{
    "id": "overlay_LlI4wrVtcuBcSof",
    "z_index": 999999
}, {
    "id": "overlay_IZ2l6piwCNpKxAH",
    "z_index": 999999
}]
Cybernetic answered 2019-10-08T00:42:08Z
0 votes

这个解决方案受到@Rajkeshwar Prasad的出色创意的启发。

<div id="layer_1" onclick="maxZIndex(this)">layer_1</div>
<div id="layer_2" onclick="maxZIndex(this)">layer_2</div>
<div id="layer_3" onclick="maxZIndex(this)">layer_3</div>
<div id="layer_1" onclick="maxZIndex(this)">layer_1</div>
<div id="layer_2" onclick="maxZIndex(this)">layer_2</div>
<div id="layer_3" onclick="maxZIndex(this)">layer_3</div>
<div id="layer_1" onclick="maxZIndex(this)">layer_1</div>
<div id="layer_2" onclick="maxZIndex(this)">layer_2</div>
<div id="layer_3" onclick="maxZIndex(this)">layer_3</div>

yorg answered 2019-10-08T00:42:45Z
-1 votes

考虑下面的代码,您可以将其用作库:getMaxZIndex

Michael Zelensky answered 2019-10-08T00:43:13Z
translate from https://stackoverflow.com:/questions/1118198/how-can-you-figure-out-the-highest-z-index-in-your-document