javascript：确保元素始终出现在顶部答案

【问题标题】：javascript: ensure element always appears on topjavascript：确保元素始终出现在顶部
【发布时间】：2014-08-25 06:31:45
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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 层。

【讨论】：

看起来我的 chrome 浏览器不支持对话框元素。糟透了....本来是完美的解决方案，我找到了 polyfill 版本，但不确定它是否与 github.com/GoogleChrome/dialog-polyfill 相提并论
@user299709 我认为<dialog>目前只有chrome支持，但你必须启用一个标志。