javascript:确保元素始终出现在顶部

Question

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

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

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

Answer 1

如果你想用任何元素重叠任何东西，使用 z-index .您必须考虑:

• 你必须使用最高的z-index value 你可以，为了将元素定位在同一 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不应该是上面的任何属性

• 如果有flash，无论z-index如何，你都无法重叠它除非你修改它的 wmode属性为 transparent或 opaque .
  请注意，此更改会损害该小程序的性能。

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