javascript：确保元素始终显示在顶部

Question

我创建了一个简单的chrome扩展工具，用于在用户将要浏览的页面上显示小文本消息（带有z-index 999999的div）。有时，div仍会出现在现有页面元素的下方，更糟糕的是，div的内容会发生变化，因为页面已经拥有了自己的CSS规则。

挑战在于如何确保我的短信出现在所有元素之上（适用于任何网站），并且它看起来一致且不受现有CSS规则的影响。

iframe会解决这个问题吗？但是，即使使用iframe，它仍然需要出现在所有元素之上，并且看起来像z-index总是不起作用。

Answer 1

如果要与任何元素重叠，请使用z-index。你必须考虑：

• 您必须使用最高z-index值才能将元素置于同一stacking context内的其他元素之上。
  请参阅Minimum and Maximum value of Z-INDEX。

• 要使z-index正常工作，必须定位该元素 例如，position: relative或position: absolute。

• 如果堆叠上下文低于其他元素，则巨大的z-index将毫无用处。 为了避免这种情况：

  • 尽可能减少元素祖先的数量，这可能是堆叠上下文。
  • 确保它们不是堆叠上下文。他们需要
    • z-index: auto
    • opacity: 1
    • 在某些浏览器中，position不应为fixed
    • will-change不应是上述任何属性

• 如果有闪光灯，除非您将z-index属性修改为wmode或transparent，否则无论opaque是什么，您都无法重叠。
  请注意，此更改会损害该小程序的性能。

或者，HTML5引入了<dialog>元素，该元素具有showModal方法。调用Thad方法时，会将对话框推送到文档的pending dialog stack，这意味着它将被添加到top layer图层。