Question

我正在制作Google Chrome扩展程序。此扩展程序的一部分将一些HTML注入到与其加载的任何网页中。该HTML的显示应该显示在其余HTML的顶部。我遇到的问题是，当我加载某些页面时，在其他页面上确实显示了注入的HTML时却看不到它。我做了一些研究，并尝试根据this post将z-index设置为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。确实可以在[stackoverflow.com 5}上使用。

感谢您的所有回答。

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

1 个答案: