强制 div 成为任何和所有网页的最顶层元素

Question

我目前正在为 Chrome 构建一个开源插件。它已经完成了——但我正在尝试解决一些错误。本质上，在任何和所有网页中移动的 div（注入到页面的 HTML 中）必须是最顶层的元素，以便它可见。这是通过 z-index @ 999 实现的。但是在某些网页上，这不起作用！

在我的脑海中，当您在 code.google.com 上登录时，菜单栏覆盖了我的 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.，我试过 !important 无济于事。

谢谢！

Answer 1

您的 z-index 为 999。在这种情况下，您尝试覆盖的元素的 z-index（附加了 .menuDiv 类的元素）的 z-index 为 1001。999 绝不是浏览器允许的最大 z-index 值，因此您注入的 div 仍将低于更高 z-indexed 元素。

根据您收到的问题之一，请参阅Minimum and Maximum value of Z-INDEX，了解有关允许的 z-index 值以及在尝试创建最大级别元素时使用什么（通常为 +2147483647）的讨论。

如果你知道你不希望这个元素被任何东西覆盖（警告：除了可能的元素也使用相同的元素），使用：

z-index: 2147483647;

如果您想保留一些灵活性，您可以考虑使用稍微低一些的东西。您可能会被竞争元素分层的几次可能是值得的。只要您的 z-index 值接近 Max，如果您不介意可能会导致插件出现一些渲染问题，您还可以编写一些脚本来将高于您的任何 z-index 降低到您的以下。

如果您再次遇到类似情况，Chrome 有一个相当不错的内置检查工具：右键单击导致您出现问题的元素，检查元素，然后在右侧显示区域中展开“计算样式”。请注意，z-index 可能很难跟踪（即使打开“视图继承”）：您需要选择适当定位的 div/etc，而不是静态内部元素。继续退出嵌套直到找到它。