Is there a way to override z-index

Question

I am working on making a Google Chrome extension. Part of this extension injects some HTML into whatever webpage it is loaded with. That HTML is displayed supposed to be displayed on top of the rest of the HTML. The problem I am having is when I load some pages I can not see the injected HTML while on other pages it does show up. I did some research and tried setting the z-index to the maximum value of 2147483647 based on this post. Even when I did that, on some of the webpages it still did not show up. I am wondering if there is a way I can get the HTML to show up. I looked at the styles on the pages and I might have missed something but I did not see any z-index styles. The following code is:

#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 of the webpages that don't display the HTML: digitalocean.com, schoology.com, hashbangcode.com. It does work on [stackoverflow.com5.

Thank you for all of your answers.

Answer 1

Just for future reference, evolutionxbox said that when there is no position applied the element might get pushed off of the screen. To prevent that I just added top:0 to the #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>