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

Question

我想让一个元素（例如

）成为页面上的最顶层。

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

这是正确的吗？

相反，是否有可能以某种方式获取最高元素的 z-index，并使该

的 z-index > [最高元素的值] + 1？例如：

$myDiv.css("z-index", $(document.body).highestZIndex() + 1);

模态 JavaScript“窗口”如何工作？

Answer 1

http://abcoder. com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/ ->找到最大 z-index 并为其分配 +1。

Answer 2

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 的异步特性，返回值可能不是您所期望的，但在任何元素上调用该函数都可以正常工作。

Answer 3

操作方法如下：

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 4

堆叠上下文怎么样？ 并不总是这样：在文档上，最高的 z-index 将位于顶部。请参阅：http://philipwalton.com/articles/没有人告诉你关于 z-index 的事情/。如果不考虑堆叠上下文，设置 10 亿可能不足以使您的元素位于最顶层。