如何获取文档中 CSS z-index 最高的（元素）？

Question

这个问题再简单不过了。 z-index 值由 style=... 或 className 指定，无论是否使用 Javascript。我认为这并不重要。如何（使用 Javascript）找到最高的 z-index？ （它所使用的元素会很好，但不是必需的。）

您不能使用（新）querySelector，因为它不查询 CSS 值。有什么办法可以查询CSS吗？ （不是样式表，而是实际使用的值。）

Grazi

---

获取前 5 个元素 + z 索引：

Array.from(document.querySelectorAll('*')).map(el => [el, getComputedStyle(el).zIndex]).filter(v => !isNaN(parseInt(v[1]))).sort((a, b) => b[1] - a[1]).slice(0, 5)

Answer 1

这并不像查找 z-index 最高的元素那么简单。堆叠顺序还取决于树关系，因此，如果显式设置了具有最多 z-index 的静态定位元素，并且如果您的代码检索了该元素，则它将毫无用处，因为 z-index 对于静态定位元素是无用的。

此外，IE 的堆叠顺序规则完全被破坏，因此您也必须考虑到这一点。您可能需要考虑 IE 8/9 之前版本中的 iframe/select 元素，因为它们比任何其他节点具有更高的堆叠顺序优先级。

这可能会有用： http://www.w3.org/TR/CSS21/zindex .html

您必须遵循所有这些内容并考虑 IE 错误，以便采用一致的方法来获取具有最高堆叠顺序优先级的元素。

Answer 2

这是 kennebec/Pravens 代码的修改版本，用于查找堆叠上下文中的最高 z 索引。此版本还考虑了不透明度。

如果您想要的只是将一个元素放置在页面中其他所有元素的顶部，只需调用 highZ(document.body) 或仅调用 highZ() 即可。它会找到根堆叠上下文的最高 z 索引，这将完全做到这一点。

• 只有非静态定位的元素在堆叠上下文中才重要。
• 未定位的元素不会启动新的堆叠上下文。因此它们的后代可能存在于当前的堆叠上下文中。因此就有了递归。
• 此外，如果 z-index 为“auto”，则该元素不会启动新的堆叠上下文，因此您必须递归遍历其元素。

• 不透明度值小于 1 的元素会启动一个新的堆叠上下文。如果未定位不透明度小于 1 的元素，则实现必须在其父堆叠上下文中以与“z-index: 0”的定位元素相同的堆叠顺序绘制它创建的图层，并且'不透明度：1'。如果定位不透明度小于 1 的元素，则按照 [CSS21] 中的描述应用“z-index”属性，但“auto”被视为“0”，因为始终会创建新的堆叠上下文。

  函数 highZ(父级，限制){
      极限=极限||无穷大；
      父=父||文档.正文；
      var who, temp, max= 1, 不透明度, i= 0;
      var Children = Parent.childNodes, length = Children.length;
      while(i<长度){
          谁=孩子们[i++]；
          if (who.nodeType != 1) 继续; // 仅限元素节点
          不透明度 = deepCss(who,"不透明度");
          if (deepCss(who,"位置") !== "静态") {
              temp = deepCss(who,"z-index");
              if (temp == "auto") { // 定位且 z-index 为 auto，不透明度 < 的新堆栈上下文0. 此外，当 zindex 为 auto 时，在堆栈上下文中应将其视为 zindex = 0。
                  （不透明度<1）？ temp=0:temp = highZ(谁);
              } 别的 {
                  temp = parseInt(temp, 10) || 0;
              }
          } else { // 非定位元素，一个新的不透明度堆叠上下文< 1 和 zindex 应被视为 0
              （不透明度<1）？ temp=0:temp = highZ(谁);
          }
          if (temp > max && temp <= limit) max = temp;                
      }
      返回最大值；
  }
  
  函数 deepCss(who, css) {
      var sty, val, dv= document.defaultView ||窗户;
      if (who.nodeType == 1) {
          sty = css.replace(/\-([az])/g, 函数(a, b){
              返回 b.toUpperCase();
          });
          val = who.style[sty];
          如果（！val）{
              if(who.currentStyle) val= who.currentStyle[sty];
              否则如果（dv.getCompulatedStyle）{
                  val= dv.getCompulatedStyle(who,"").getPropertyValue(css);
              }
          }
      }
      返回值|| “”；
  }
  

Answer 3

您需要循环遍历 DOM 中的每个元素，并跟踪循环时找到的最大 z 索引以及具有该 z 索引的元素。然后，完成后，您将获得您正在寻找的元素。

这是一段非常密集的脚本，可能会杀死用户的浏览器。你究竟为什么要这样做？

Answer 4

您只需要同级元素即可找到最高的 z-index，因此从父元素或主体开始。

通常，您有一些 z-index 非常高的元素，您希望它始终位于顶部 - 如果是这样，
忽略超过 100 万的 z 索引或安全高于同级数量的任何值。

您可以在一个函数中完成此操作，但查找样式表值的语法很方便。

function highZ(pa, limit){
    limit= limit || Infinity;
    pa= pa || document.body;
    var who, tem, mx= 1, A= [], i= 0, L;
    pa= pa.childNodes, L= pa.length;
    while(i<L){
        who= pa[i++]
        if(who.nodeType== 1){
            tem= parseInt(deepCss(who,"z-index")) || 0;
            if(tem> mx && tem<=limit) mx= tem;
        }
    }
    return mx;
}
function deepCss(who, css){
    var sty, val, dv= document.defaultView || window;
    if(who.nodeType== 1){
        sty= css.replace(/\-([a-z])/g, function(a, b){
            return b.toUpperCase();
        });
        val= who.style[sty];
        if(!val){
            if(who.currentStyle) val= who.currentStyle[sty];
            else if(dv.getComputedStyle){
                val= dv.getComputedStyle(who,"").getPropertyValue(css);
            }
        }
    }
    return val || "";
}

警报（高Z（））

Answer 5

meder 提出了一个很好的观点！无论如何，我尝试对其进行编码，因为我在工作中感到无聊并且无法帮助自己：

注意：仅适用于使用 style 属性设置的样式（不会捕获样式表设置的样式）

function getHighIndex (selector) {
    if (!selector) { selector = "*" };

    var elements = document.querySelectorAll(selector) ||
                   oXmlDom.documentElement.selectNodes(selector),
        i = 0,
        e, s,
        max = elements.length,
        found = [];

    for (; i < max; i += 1) {
        e = elements[i].style.zIndex;
        s = elements[i].style.position;
        if (e && s !== "static") {
          found.push(parseInt(e, 10));
        }
    }

    return found.length ? Math.max.apply(null, found) : 0;
}