有没有办法覆盖 z-index答案

【问题标题】：Is there a way to override z-index有没有办法覆盖 z-index
【发布时间】：2020-10-11 22:59:14
【问题描述】：

我正在制作一个 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。它确实适用于 [stackoverflow.com5。

感谢您的所有回答。

【问题讨论】：

你是在页面的哪里注入的？ z-index 是基于上下文的。
我用document.body.appendChild(main_div); 注入它，所以它被注入<body> 元素。
2147483647 - 为什么？为什么要这样做？
您是否确认html 和 css存在于那些您看不到的页面中
#reading-lines-injected 没有任何职位。它可能会被推离屏幕。尝试添加top: 0;

标签： javascript html css google-chrome-extension z-index

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

【讨论】：