CSS/JavaScript：使元素成为最顶层的 z-index/最顶层的模态元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4755631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS/JavaScript: Make element top-most z-index/top-most modal element
提问by AgileMeansDoAsLittleAsPossible
I would like to make an element (e.g. a <div>) be the top-most layer on the page.
我想让一个元素（例如 a <div>）成为页面上的最顶层。
My assumption is that the only way I can do this is to specify that the element has a style="z-index:"value that is the maximum the browser allows (int32?).
我的假设是，我能做到这一点的唯一方法是指定元素的style="z-index:"值是浏览器允许的最大值（int32？）。
Is this correct?
这个对吗？
Instead, would it be possible to somehow get the element's z-indexwhose is highest, and make this <div>'s z-indexthe [highest element's value] + 1? For example:
相反，它有可能以某种方式获取元素z-index，其最高，使这个<div>的z-index了[highest element's value] + 1？例如：
$myDiv.css("z-index", $(document.body).highestZIndex() + 1);
How do modal JavaScript "windows" work?
模态 JavaScript“窗口”如何工作？
回答by Sheavi
Here's how to do it :
这是如何做到的：
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 now contains the highest z-index on the page... just add 1 to that value and apply it wherever you want. You can apply it like so :
现在，highest_index 包含页面上最高的 z-index……只需将该值加 1 并将其应用于任何您想要的位置。你可以像这样应用它：
your_element.style.zIndex = highest_index + 1;
Here's another way of achieving the same thing using jQuery :
这是使用 jQuery 实现相同目的的另一种方法：
var highest_index = 0;
$("[z-index]").each(function() {
if ($(this).attr("z-index") > highest_index) {
highest_index = $(this).attr("z-index");
}
});
Again, same way to apply the new index to an element :
同样，将新索引应用于元素的方法相同：
$("your_element").attr("z-index", highest_index + 1);
回答by superuser000001
What about stacking context? It is notalways true that: On a document highest z-index will be on top. See: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/. If you do not take stacking context into account, setting a billion may not be enough to make your element on the top-most.
堆叠上下文怎么样？这是不总是正确的是：在一个文档最高的z-index将在最前面。请参阅：http: //philipwalton.com/articles/what-no-one-told-you-about-z-index/。如果不考虑堆叠上下文，设置十亿可能不足以使您的元素位于最顶部。
回答by Ravikiran
http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/-> find the max z-index and assign +1 to it.
http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/-> 找到最大 z-index 并为其分配 +1。
回答by Nik V
Sheavi's jQuery solution doesn't work because z-index is a css style, not an attribute.
Sheavi 的 jQuery 解决方案不起作用，因为 z-index 是 css 样式，而不是属性。
Try this instead:
试试这个：
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;
};
Return value may not be what you expect due to Javascript's async nature, but calling the function on any element will work fine.
由于 Javascript 的异步性质，返回值可能不是您所期望的，但是在任何元素上调用该函数都可以正常工作。
