13

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

在我的脑海中，当您在 code.google.com 登录时，菜单栏覆盖了我的 div。

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

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

PS，我试过 !important 无济于事。

谢谢！

4

1 回答 1

17

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

根据您收到的问题中的一条评论，请参阅Z-INDEX 的最小值和最大值，以讨论允许的 z-index 值以及在尝试创建最大级别元素时使用的内容（通常为 +2147483647）。

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

z-index: 2147483647;

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

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

于 2012-12-06T21:23:02.430 回答