有没有办法覆盖 z-index

Question

我正在制作 Google Chrome 扩展。此扩展的一部分将一些 HTML 注入到它加载的任何网页中。 HTML 应该显示在 HTML 的其余部分之上。我遇到的问题是当我加载一些页面时我看不到注入的 HTML 而在其他页面上它确实显示出来。我做了一些研究并尝试将 z-index 设置为基于 this post 的最大值 2147483647。即使我这样做了，在某些网页上它仍然没有出现。我想知道是否有办法让 HTML 出现。我查看了页面上的样式，可能遗漏了一些内容，但我没有看到任何 z-index 样式。下面的代码是：

#reading-lines-injected {
    position: fixed;
    z-index: 2147483647;
    width: 100%;
}
#top-bar-reading-line, #bottom-bar-reading-line {
    position: relative;
    height: 20px;
    background-color: black;
    opacity: 70%;
}
#gap-reading-line {
    position: relative;
    height: 15px;
}

<div id="reading-lines-injected">
   <div id="top-bar-reading-line"></div>
   <div id="gap-reading-line"></div>
   <div id="bottom-bar-reading-line"></div>
</div>

一些不显示 HTML 的网页：digitalocean.com, schoology.com, hashbangcode.com. It does work on [whosebug.com5。

感谢您的所有回答。

Answer 1

仅供将来参考，evolutionxbox 表示当没有应用位置时，元素可能会被推出屏幕。为了防止我刚刚添加 top:0 到 #reading-lines-injected div.

#reading-lines-injected {
    position: fixed;
    z-index: 2147483647;
    width: 100%;
    top: 0;
}
#top-bar-reading-line, #bottom-bar-reading-line {
    position: relative;
    height: 20px;
    background-color: black;
    opacity: 70%;
}
#gap-reading-line {
    position: relative;
    height: 15px;
}

<div id="reading-lines-injected">
   <div id="top-bar-reading-line"></div>
   <div id="gap-reading-line"></div>
   <div id="bottom-bar-reading-line"></div>
</div>

有没有办法覆盖 z-index

Is there a way to override z-index

html

javascript

css

z-index

google-chrome-extension