We Keep Coding

Is there a way to override z-index

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.

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>

Stop 'JavaScript function triggering css width' from affecting scrolling-screen position (On Mobile device)

This might be a simple issue to fix but I struggled:
On this website index page, if you scroll a bit down to interactive map.
This problem also arises on web browser on laptop as well.(just discovered!
ps. This was an embedded map as iframe html!
See source html:
<iframe id="iframe" width="100%" height="620px" src="leaflet_v1/index.html"></iframe>
Basically after you click a lot (area), the info section will show up. (this is made from leaflet web map from QGIS)--> I changed JS code here to make slider info appear:
function popup(){
document.getElementById('slider').style.width='75%';
document.getElementById('slider').style.zIndex='1000';
//..then insert data
//.. put a inline html for js Close function
}
layer.bindPopup(popup, {maxHeight: 400});
At the end of the leaflet index page, I got a section closer JS function:
<script>
function CloseSlider(){
document.getElementById('slider').style.width='1px';
}
</script>
BUT weird thing is that when you close the section using that button on "MOBILE DEVICES", the screen will JUMP UP and make the map stick at the top of the screen.
I wish I can cancel this effect.
:) Can anyone solve it ? :)
If you need to see the css setting for that slider , here you go:
<style>
.slider{
height: 100%;
width:2px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:rgb(39,57,66);
opacity: 0.90;
padding-left: 20px;
padding-top: 20px;
overflow-x: hidden;
transition: 0.3s;
}
.slider a{
padding: 5px 20px 5px 0px;
text-decoration: none;
font-size: 15px;
color: pink;
display: block;
transition: 0.3s;
}
.slider a:hover{
background-color:rgb(39,57,66);
color: white;
}
.slider .btn-close{
position: absolute;
top:0;
right: 10px;
font-size: 35px;
margin-left: 30px;
}
</style>
Hope this is not too complex :)

Surprisingly, the Solution is so silly:
Get rid of the:
href="#"
from <a> element...

How to disable a link on a widget from another site?

How do I disable the link associated with the widget I added to my website? I don't have access to anything other than the HTML code they provided. An example would be the Trustpilot widget at the bottom of the page in the link. If you click on the widget it takes you to Trustpilot's website, but we don't want that to happen. https://goldsilver.com/

The widget is an iframe, and when an iframe is cross domain (so the iframe source file is not on your site) you can not change anyting inside of it.
You could put an overlay div over it, but that would block every click on the iframe.
By the way, you can't do this thing to widgets provided by the vendors, as its against their policies ~ Saumya Rastogi
Just for learning purposes:
#widget {
width: 450px;
height: 350px;
border: 1px solid black;
position: relative;
}
#widget > iframe {
border: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
#widget:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2000;
}
<div id="widget">
<iframe src="https://widget.trustpilot.com/trustboxes/539ad0ffdec7e10e686debd7/index.html?locale=en-US&templateId=539ad0ffdec7e10e686debd7&businessunitId=4bf1926500006400050c99f2&styleHeight=350px&styleWidth=100%25&theme=light&stars=4%2C5"></iframe>
</div>

You can give this css property to that particular a tag like this:
a { pointer-events: none; }
a.disabled_link {
pointer-events: none;
}
<a class="disabled_link">Any Link</a>
By the way, you can't do this thing to widgets provided by the vendors, as its against their policies.

jQuery onClick hide <div>

I can't quite figure out why my jQuery isn't removing/hiding a specific div I've looked at several examples and it should work perfectly fine. This is done on jQuery on Drupal 7. Here's the site in which its live on:http://mahonysbeta.scdmarketing.com/
HTML
<div id="closingnote">
<div class="xbutton">X</div>
<img class="note" src="/sites/default/files/ClosingNote.png">
</div>
CSS
/*closing note*/
#closingnote {
left: 20%;
position: absolute;
top: 175px;
z-index: 9999;
}
.xbutton {
position: absolute;
padding: 3px 5px 0px;
left: 237px;
top: 10px;
color: black;
border: 1px black solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
font-size: 10px;
}
JS
(function ($) {
$('.xbutton').click(function(){
$('#closingnote').remove();
});
})(jQuery);

The code you've provided works fine.
If you're dynamically adding your "closingnote" or "xbutton" divider, you'll need to delegate the click event to an ancestor which was created prior to that being added to the page using jQuery's on() method:
$('body').on('click', '.xbutton', function() {
$('#closingnote').remove();
});
If this still doesn't work, one can only conclude that you've either forgotten to include jQuery, have included jQuery after your code or are using multiple elements with the same id.
Check your browser's JavaScript console to see if any errors are being thrown, and ensure that your ids are unique.

Toggle needs to work only on parent div, not child div

I am simulating a pop up window that fades the background out. I do this by simply toggling a div that fills the whole screen. I would like to be able to close the pop up by clicking the outside background, but not when you click on the new content area, which is what is currently happening. My code:
JS:
function popbox() {
$('#overbox').toggle();
}
HTML:
<div class="popbox" onclick="popbox()"> Click Here </div>
<div id="overbox" onclick="popbox()">
<div id="infobox1">
<p>This is a new box</p>
<br />
<p>hello </p>
<br/><br/>
<p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
</div><!-- end infobox1 -->
</div> <!-- end overbox -->
CSS:
#overbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(64, 64, 64, 0.5);
z-index: 999999;
display: none;
}
#infobox1 {
margin: auto;
position: absolute;
left: 35%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
border: 1px solid red;
}
.popbox {
cursor: pointer;
color: black;
border: 1px solid gray;
padding: 5px; 10px;
background: ghostwhite;
display: inline-block;
}
JSFiddle link: http://jsfiddle.net/RrJsC/
Again, I want it to toggle only when you click the faded background or "close" (which isnt working in the jsfiddle but is on my site), but not when you click inside the white box that it contains.
After some research it seems like I might be looking for .stopPropagation(), but I haven't been able to get it to work at all.

I got it to work using jQuery's event handlers:
$('#container').on('click', '.popbox, #overbox', function(e){
$('#overbox').toggle();
});
$('#container').on('click', '#infobox1', function(e){
e.stopPropagation();
});
I replaced document with '#container' for better performance. You should wrap all your divs in <div id="container">...</div> so the the callback doesn't fire on the dom every time there is a click (even thought that callback is only called when the selector matches).
You'll also need to get rid of your onclick html attributes, because they will throw an error if that function is not defined.

I hope I understand well your problem.
If it is the case, you should have this:
<div id="overbox">
instead of this:
<div id="overbox" onclick="popbox()">
here is the updated jsfiddle