javascript - 强制 div 成为所有网页的最顶层元素

Question

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

我没想到，当您登录 code.google.com 时，菜单栏覆盖了我的 div。

无论网络开发人员做什么，我如何在注入(inject)时强制它成为最顶层？

这是我的 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) */
}

附言，我尝试了 !important 但无济于事。

谢谢!

Answer 1

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

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

如果你知道你永远不想让这个元素被任何东西分层(警告:除了潜在的元素也使用相同的)，使用:

z-index: 2147483647;

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

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