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

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) */
}

PS,我试过了!重要但无济于事.

谢谢!

Answer 1

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

根据您收到的问题之一,请参阅Z-INDEX的最小值和最大值,以讨论允许的z-index值以及在尝试创建最大级别元素时使用的内容(通常为+2147483647).

如果你知道你不希望这个元素被任何东西分层(警告:除了使用相同的元素之外),使用:

z-index: 2147483647;

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

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