Question

我目前正在为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) */
}

P.S。，我试过了！重要但无济于事。

谢谢！

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）。< / p>

如果你知道你不希望这个元素被任何东西分层（警告：除了使用相同的元素之外），使用：

z-index: 2147483647;

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

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

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

1 个答案: