I have been developing a Google Chrome extension that involves injecting HTML into webpages. The injected HTML should be displayed on top of the existing content, but I am encountering an issue. On some pages, the injected HTML does not show up, even after setting the z-index to the maximum value recommended in a post I found online (link). Despite this adjustment, the HTML still fails to display on certain webpages. I have checked for z-index styles in the page's CSS but did not find any discrepancies.
The CSS code I have implemented is as follows:
#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>Some examples of websites where the HTML does not display properly include: digitalocean.com, schoology.com, hashbangcode.com. However, it works correctly on [stackoverflow.com5.
I appreciate any insights or solutions you may have regarding this matter.