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

Question

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

之前我曾猜过数字3，但没有效果。

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

我尝试在 Firebug 中查找此指标，但找不到。

Answer 1

没有默认属性或任何东西，但您可以编写一些 JavaScript 来循环所有元素并找出答案。 或者，如果您使用像 jQuery 这样的 DOM 管理库，您可以扩展它的方法（或者查明它是否已经支持它），以便它开始跟踪页面加载时的元素 z 索引，然后检索最高的 z 索引就变得微不足道了。指数。

Answer 2

上面的“ES6”版本比第一个解决方案效率低，因为它在整个数组上进行了多次冗余传递。 相反，请尝试：

findHighestZ = () =>
  [...document.querySelectorAll('body *')]
    .map(elt => parseFloat(getComputedStyle(elt).zIndex))
    .reduce((highest, z) => z > highest ? z : highest, 1)

理论上，在一个减少步骤中完成它会更快，但一些快速基准测试显示没有显着差异，并且代码更粗糙

Answer 3

在我看来，解决这个问题的最好方法就是为不同类型的元素设置不同类型的 z-index 的约定。 然后，您将通过查看文档找到要使用的正确 z-index。

Answer 4

最近我不得不为一个项目这样做，我发现我从 @Philippe Gerber 的这里有一个很好的答案，以及 @flo 的很好的答案（已接受的答案）。

与上面引用的答案的主要区别是：

• CSS z-index 和任何内联 z-index 样式都会被计算，并使用两者中较大的一个进行比较和计算。
• 值被强制转换为整数，并且任何字符串值（auto、static 等）都将被忽略。

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

(() => {
  /**
   * Determines is the value is numeric or not.
   * See: https://stackoverflow.com/a/9716488/1058612.
   * @param {*} val The value to test for numeric type.
   * @return {boolean} Whether the value is numeric or not.
   */
  function isNumeric(val) {
    return !isNaN(parseFloat(val)) && isFinite(val);
  }

  
  /**
   * Finds the highest index in the current document.
   * Derived from the following great examples:
   *  [1] https://stackoverflow.com/a/1118216/1058612
   *  [2] https://stackoverflow.com/a/1118217/1058612
   * @return {number} An integer representing the value of the highest z-index.
   */
  function findHighestZIndex() {
    let queryObject = document.querySelectorAll('*');
    let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
    let highest = 0;
    
    childNodes.forEach((node) => {
      // Get the calculated CSS z-index value.
      let cssStyles = document.defaultView.getComputedStyle(node);
      let cssZIndex = cssStyles.getPropertyValue('z-index');
      
      // Get any inline z-index value.
      let inlineZIndex = node.style.zIndex;

      // Coerce the values as integers for comparison.
      cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0;
      inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0;
      
      // Take the highest z-index for this element, whether inline or from CSS.
      let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex;
      
      if ((currentZIndex > highest)) {
        highest = currentZIndex;
      }
    });

    return highest;
  }

  console.log('Highest Z', findHighestZIndex());
})();

#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>

Answer 5

使用 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;
}

Answer 6

Array.reduce()

这是确定最顶层 z-index 使用 Array.reduce()：

const max_zindex = [...document.querySelectorAll('body *')].reduce((accumulator, current_value) => {
  current_value = +getComputedStyle(current_value).zIndex;

  if (current_value === current_value) { // Not NaN
    return Math.max(accumulator, current_value)
  }

  return accumulator;
}, 0); // Default Z-Index Rendering Layer 0 (Zero)

Answer 7

ShadowRoot 解决方案

我们绝不能忘记自定义元素和影子根内容。

function computeMaxZIndex() {
    function getMaxZIndex(parent, current_z = 0) {
        const z = parent.style.zIndex != "" ? parseInt(parent.style.zIndex, 10) : 0;
        if (z > current_z)
            current_z = z;
        const children = parent.shadowRoot ? parent.shadowRoot.children : parent.children;
        for (let i = 0; i < children.length; i++) {
            const child = children[i];
            current_z = getMaxZIndex(child, current_z);
        }
        return current_z;
    }
    return getMaxZIndex(document.body) + 1;
}

Answer 8

如果您希望显示具有最高 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
}]

Answer 9

一个解决方案深受 @Rajkeshwar Prasad。

	/**
	returns highest z-index
	@param {HTMLElement} [target] highest z-index applyed to target if it is an HTMLElement.
	@return {number} the highest z-index.
	*/
	var maxZIndex=function(target) {
	    if(target instanceof HTMLElement){
	        return (target.style.zIndex=maxZIndex()+1);
	    }else{
	        var zi,tmp=Array.from(document.querySelectorAll('body *'))
	            .map(a => parseFloat(window.getComputedStyle(a).zIndex));
	        zi=tmp.length;
	        tmp=tmp.filter(a => !isNaN(a));
	        return tmp.length?Math.max(tmp.sort((a,b) => a-b).pop(),zi):zi;
	    }
	};

#layer_1,#layer_2,#layer_3{
  position:absolute;
  border:solid 1px #000;
  width:100px;
  height:100px;
}
#layer_1{
  left:10px;
  top:10px;
  background-color:#f00;
}
#layer_2{
  left:60px;
  top:20px;
  background-color:#0f0;
  z-index:150;
}
#layer_3{
  left:20px;
  top:60px;
  background-color:#00f;
}

<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>

Answer 10

在 NodeList 中查找最大 zIndex 的稳健解决方案

1. 您应该检查节点本身提供的 getCompulatedStyle 和 style 对象
2. 使用 Number.isNaN 而不是 isNaN 因为 isNaN("" ) === 假

function convertToNumber(value) {
  const asNumber = parseFloat(value);
  return Number.isNaN(asNumber) ? 0 : asNumber;
}

function getNodeZIndex(node) {
  const computedIndex = convertToNumber(window.getComputedStyle(node).zIndex);
  const styleIndex = convertToNumber(node.style.zIndex);

  if (computedIndex > styleIndex) {
    return computedIndex;
  }

  return styleIndex;
}

function getMaxZIndex(nodeList) {
  const zIndexes = Array.from(nodeList).map(getNodeZIndex);
  return Math.max(...zIndexes);
}

const maxZIndex = getMaxZIndex(document.querySelectorAll("body *"));

Answer 11

短的

[...document.querySelectorAll`*`]
  .reduce((a,e,i,t,z=+window.getComputedStyle(e).zIndex||0) => z>a ? z:a ,0);

let z = [...document.querySelectorAll`*`].reduce((a,e,i,t,z=+window.getComputedStyle(e).zIndex||0) => z>a ? z:a ,0);

console.log(z);

<div style="z-index: 100"></div>
<div style="z-index: 3000"></div>
<div style="z-index: 200"></div>

Answer 12

使用 map 和 filter 的非常简单的代码

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

function getMax() {
  const max = calMaxZIndex() ?? 0
  console.log({
    max
  })
}

getMax()

#ticket-box {
  text-align: center;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  background-color: #e9d295;
  padding: 5px;
  z-index: 6;
}

<div id="menu">
  <a href="javascript:void(0);" onclick="closeMenu();" style="color: #ffffff; position: absolute; top: 15px; right: 15px;text-decoration: none;">CLOSE</a>

  <ul style="text-align:center;list-style-type:none;">
    <li><a href="#">FILM</a></li>
    <li><a href="#">MUSIC</a></li>
    <li><a href="#">SPORTS</a></li>
    <li><a href="#">FINANCE</a></li>
  </ul>
</div>

<div id="ticket-box">Have you bought your tickets for friday's event? No?! <a href="#">Grab yours now!</a></div>

<center><a href="javascript:void(0);" onclick="revealMenu();" style="display: inline-block; color: #333333; margin-top: 90px;">MENU</a></center>

Answer 13

基于之前的答案：

经过一些修改的函数

let zIndexMax = () =>
    [...document.querySelectorAll('body > *')]
        .map(elem => parseInt(getComputedStyle(elem).zIndex, 10) || 0)
        .reduce((prev, curr) => curr > prev ? curr : prev, 1);

原型

HTMLElement.prototype.zIndexMax = function () {
    return [...this.children]
        .map(elem => parseInt(getComputedStyle(elem).zIndex, 10) || 0)
        .reduce((prev, curr) => curr > prev ? curr : prev, 1);
}

用法

document.querySelector('body').zIndexMax();

Answer 14

在浏览了 StackOverflow 上的大量解决方案后，我发现它们都没有真正正常工作，并考虑了 zIndex 实际如何工作。 我编写了一个解决方案，也考虑了堆叠上下文。 你可以参考这个文章 了解堆叠上下文在 CSS 中的工作原理。

const getZIndex = el => {
  const computedStyle = getComputedStyle(el, null)
  const zIndex = computedStyle.getPropertyValue('z-index')
  return zIndex !== 'auto' ? parseInt(zIndex) : null
}

const getZIndexWithinStackingContext = (el, context) => {
  let zIndex = getZIndex(el)
  if (!zIndex) return null

  let result = zIndex

  while (el.parentElement !== context) {
    el = el.parentElement
    zIndex = getZIndex(el)
    if (zIndex) {
      result = zIndex
    }
  }

  return result
}

const createZIndex = (overVisibleOnly = false, context = document.body) => {
  const elements = [...document.querySelectorAll('body *')]
  let highestZIndex = 0

  elements.forEach(el => {
    if (overVisibleOnly) {
      const isVisible = !!el.offsetParent
      if (!isVisible) return
    }

    const zIndex = getZIndexWithinStackingContext(el, context)

    if (zIndex && zIndex > highestZIndex) {
      highestZIndex = zIndex
    }
  })

  return highestZIndex + 1
}

请注意，此解决方案考虑所有元素，而不仅仅是定位元素，因为它们可以在添加某个类后变得定位。 但是您只需添加对位置计算样式属性的检查即可轻松解决此问题。

Answer 15

我发现当页面上的 z 索引动态更改时，提供的方法不起作用（当前方法仅获取原始设置的 z 索引）。

此函数还适用于动态添加的 z 索引：

function find_max_z_index() {    
    const all_z = [];
    document.querySelectorAll("*").forEach(function(elem) {
        all_z.push(elem.style.zIndex)
    })
    const max_index = Math.max.apply(null, all_z.map((x) => Number(x)));
    return(max_index)
}

Answer 16

这是我的两行函数：

const getMaxZIndex = function () {
    const elements = [...document.querySelectorAll("body *")];
    return Math.max(...elements.map(x => parseInt(getComputedStyle(x, null).zIndex) || 0));
};
console.log(getMaxZIndex());

Answer 17

这里只是提供另一种方式。

如果你只是想知道一个元素是否在顶层，
您可以使用 document.elementFromPoint 函数，
返回 (x,y) 坐标处的顶部元素，

例如：

function elevate(node) {
    const e = node
    const r = e.getBoundingClientRect()
    const x = r.x + r.width / 2
    const y = r.y + r.height / 2

    const top = document.elementFromPoint(x, y)
    if (top == e) return true
    e.style.zIndex = (Number(window.getComputedStyle(e).zIndex) || 0) + 1
}

但是，这仅检查元素的中心是否不在
被其他元素覆盖，但不是整个元素。

Answer 18

为了清楚起见，从 abcoder 网站窃取一些代码：

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

Answer 19

您可以为特定元素类型（例如

）调用 findHighestZIndex，如下所示：

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;
}

Answer 20

使用 ES6 更简洁的方法

function maxZIndex() {

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

Answer 21

我想添加我在用户脚本之一中使用的 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找出当前的最高ZIndex 值与所有元素的所有其他计算的z 索引之间的最大值。 过滤器排除所有“auto”值。

Answer 22

我相信你所观察到的是巫毒。 如果无法访问您的完整样式表，我当然无法可靠地判断； 但我觉得这里真正发生的事情很可能是您忘记了只有定位元素才会受到 z-index 的影响。

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

Answer 23

我想你必须自己做这件事......

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;
}