Javascript 强制 div 成为任何和所有网页的最顶层元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13752175/
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
Force div to be topmost element of any and all webpages
提问by aeharding
I'm currently building an open-source plugin for Chrome. It's pretty far done -- but there's a couple bugs I'm trying to sort out. Essentially, a div (injected into a page's HTML) that moves throughout any and all webpages needs to be the topmost element so that it's visible. This is achieved by z-index @ 999. On some webpages however, this doesn't work!
我目前正在为 Chrome 构建一个开源插件。已经完成了很远-但是我正在尝试解决一些错误。本质上，在任何和所有网页中移动的 div（注入到页面的 HTML 中）需要是最顶层元素，以便它可见。这是由 z-index @ 999 实现的。然而，在某些网页上，这不起作用！
Off the top of my head, the menu bar when you're logged in at code.google.com overlays my div.
在我头顶上，当您登录 code.google.com 时，菜单栏覆盖了我的 div。
How do I force it to be the topmost when injected no matter what a web developer does?
无论 Web 开发人员做什么，我如何强制它在注入时成为最顶层？
Here's my CSS for the div:
这是我的 div 的 CSS：
#ezselected {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position:absolute;
border-radius: 15px;
z-index: 999;
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);
/*box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);*/
pointer-events:none; /* Make click-able through the DIV (for example, if it's on top of something with an event with kb) */
}
P.S., I tried !important to no avail.
PS，我试过 !important 无济于事。
Thanks!
谢谢！
回答by taswyn
Your z-index is 999. The z-index of the element you are trying to cover in this case (an element with the class .menuDiv attached) has a z-index of 1001. 999 is not by any stretch the max z-index value browsers allow, so your injected div will be below higher z-indexed elements still.
您的 z-index 是 999。在这种情况下，您要覆盖的元素的 z-index（附加了 .menuDiv 类的元素）的 z-index 为 1001。999 无论如何都不是最大 z-索引值浏览器允许，因此您注入的 div 仍将低于更高的 z 索引元素。
As per one of the comments your question received, see Minimum and Maximum value of Z-INDEXfor a discussion on the allowable z-index values and what to use if you are trying to create a max level element (generally +2147483647).
根据您的问题收到的评论之一，请参阅Z-INDEX 的最小值和最大值，以讨论允许的 z-index 值以及尝试创建最大级别元素时要使用的内容（通常为 +2147483647）。
If you know that you don't ever want this element to be layered over by anything (caveat: except potentially elements also using the same), use:
如果你知道你不希望这个元素被任何东西覆盖（警告：除了潜在的元素也使用相同的元素），使用：
z-index: 2147483647;
You might consider using something slightly lower if you want to retain some flexibility. The few times you might be layered over by a competing element would probably be worth it. So long as your z-index value is near Max, you could also script something to lower any z-indexes above yours to below yours if you don't mind potentially causing some rendering issues with your plugin.
如果您想保留一些灵活性，您可以考虑使用稍微低一点的东西。您可能会被竞争元素覆盖的次数可能是值得的。只要您的 z-index 值接近 Max，如果您不介意可能会导致您的插件出现一些渲染问题，您还可以编写一些脚本来将任何高于您的 z-index 降低到低于您的 z-index。
Chrome has a fairly nice built-in inspection tool if you have a similar situation again: right click an element causing you issues, inspect element, and then expand "Computed Style" in the right display area. Note that z-index can be tricky to track (even with "view inherited" turned on): you need to have an appropriately positioned div/etc selected, not static interior elements. Just keep backing out of the nesting until you find it.
如果您再次遇到类似情况，Chrome 有一个相当不错的内置检查工具：右键单击导致问题的元素，检查元素，然后在右侧显示区域展开“计算样式”。请注意，跟踪 z-index 可能很棘手（即使打开了“视图继承”）：您需要选择适当定位的 div/etc，而不是静态内部元素。只要不断退出嵌套，直到找到它。
