Minimum and Maximum Value of Z-Index

CSS - max z-index value

These are the max values.

Browser         Max z-index value  When exceeded, value changes to:
Internet Explorer 6 2147483647  2147483647
Internet Explorer 7 2147483647  2147483647
Internet Explorer 8 2147483647  2147483647
Firefox 2           2147483647  *element disappears*
Firefox 3           2147483647  0
Safari 3            16777271    16777271
Safari 4            2147483647  2147483647
Chrome 29           2147483647  2147483647
Opera 9             2147483647  2147483647

Found it somewhere on the web.

z-index maximum value

Yes it does depend on the browser

http://www.puidokas.com/max-z-index/

Why css z-index property is not working even z-index value of one component is greater than other target component?

z-index is working on positioned elements : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

So you could add position: relative; to your elements you want to change z-index prop

Is there a way to override z-index

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>

Why do developers use high z-index values

Why developers do something is not a question with a straight-forward answer and requires a scientific research. This is not a board for that. However, from my own experience and from observing others:

Because you assume that you'll have 1, 2, 10, 50, 100 in the future and know that something will go over even that, so you pick 9999.
Because you're not sure which values you have used but you know you didn't place anything more than 9999, so you write that.
Because you have no idea how stacking contexts work, but high value of z-index seemingly fixes the problem and earns your salary and you don't really care about anything else.
Because everyone else does it that way.
Because it's copy/pasted from an ancient tutorial that did it.