Question

我想让一个元素（例如<div>）成为页面上最顶层的。

我的假设是，我能做到这一点的唯一方法是指定元素的值style="z-index:"是浏览器允许的最大值（int32？）。

这是对的吗？

相反，是否有可能以某种方式获得最高的元素z-index，并使<div>的{{1}}成为z-index？例如：

[highest element's value] + 1

模态JavaScript“windows”如何工作？

Answer 1

以下是如何操作：

var elements = document.getElementsByTagName("*");
var highest_index = 0;

for (var i = 0; i < elements.length - 1; i++) {
    if (parseInt(elements[i].style.zIndex) > highest_index) {
        highest_index = parseInt(elements[i].style.zIndex;
    }
}

highest_index现在包含页面上最高的z-index ...只需将1添加到该值并将其应用于您想要的任何位置。你可以像这样申请：

your_element.style.zIndex = highest_index + 1;

这是使用jQuery实现相同功能的另一种方法：

var highest_index = 0;

$("[z-index]").each(function() {
    if ($(this).attr("z-index") > highest_index) {
         highest_index = $(this).attr("z-index");
    }
});

同样，将新索引应用于元素的方法相同：

$("your_element").attr("z-index", highest_index + 1);

Answer 2

堆叠上下文怎么样？不总是如此：在文档上，最高的z-index将位于顶部。见：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/。如果您不考虑堆叠上下文，设置十亿可能不足以使您的元素位于最顶层。

Answer 3

http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/ - ＆gt;找到最大z-index并为其指定+1。

Answer 4

Sheavi的jQuery解决方案不起作用，因为z-index是一种css样式，而不是属性。

请改为尝试：

raiseToHighestZindex = function(elem) {
    var highest_index = 0;
    $("*").each(function() {
        var cur_zindex= $(this).css("z-index");
        if (cur_zindex > highest_index) {
            highest_index = cur_zindex;
            $(elem).css("z-index", cur_zindex + 1);
        }
    });
    return highest_index;
};

由于Javascript的异步性质，返回值可能不是您所期望的，但调用任何元素上的函数都可以正常工作。

CSS / JavaScript：使元素最顶层的z-index /最顶层的模态元素

4 个答案: