如何找到具有最高 z-Index 的元素？答案

【问题标题】：How to find element with biggest z-Index?如何找到具有最高 z-Index 的元素？
【发布时间】：2013-01-03 04:07:49
【问题描述】：

我有很多动态创建的元素，只要它得到 z-Index++，所以最新的元素随时都在顶部。当其中一个被点击时，他得到他的 z-Index max+1。所以我需要得到元素，也就是在上面，我该怎么做呢？

请仅使用本机 JS。谢谢

【问题讨论】：

重复：stackoverflow.com/questions/1118198/…

标签： javascript css z-index

【解决方案1】：

不要试图找到它——你需要迭代所有的 DOM。当您动态创建它们时，只需保存对它的引用并每次更新它。或者只是将当前最高的z-index 值存储在max 变量中。

【讨论】：

你是什么意思，有存储空间？
这很聪明，我喜欢这个想法，但我不明白如何在不迭代 DOM 的情况下保持精确的 z-index 变量。 OP 说他正在创建一些动态元素，但我们不知道在第一个添加的元素之前有多少......
@BASILIO：动态创建元素时使用的机制与z-Index++ 相同
but I don't see how it's possible to keep a precise z-index ...通过设置？
@BASILIO：这是很多程序逻辑。不要为此依赖 DOM-CSS-values，而是为其构建数据模型。例如，您应该有一个窗口堆栈（数组），您只需要pop() 即可获取并关闭最顶层的窗口。

【解决方案2】：

http://jsfiddle.net/h4ets/

假设您只在 style 属性中应用 z-index

var elems = document.body.getElementsByTagName("*");
var largest;
var check = 0;
for(i=0;i<elems.length;i++){
    if(elems[i].style.zIndex > check){
        check = elems[i].style.zIndex;
        largest = elems[i];
    }
}
// largest is the element
// check is the z-index value of the element with largest z-index

在 chrome 等 webkit 浏览器和 safari 中，获取元素的计算样式似乎是一个问题，因为它返回 auto，这是一个主要问题，因为 chrome 尤其是现在是一种流行且广泛使用的浏览器。所以现在我建议如果你想这样做，在样式属性中应用 z-index，直到错误被修复

【讨论】：

【解决方案3】：

这是最好的解决方案

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。