Question

I have a bookmark that calls script and lays a css overlay over the webpage. There is a top bar with a button to close it and the rest is simply a div with a semi-transparent background. Pick a random site and it looks fine, but for example, Google’s top bar covers it as well as the search and buttons cover the overlay. Another example is reddit’s header.

I make these divs and the button:

var overlayBackground = document.createElement('div'); //main overlay that covers the page
overlayBackground.setAttribute('id', "overlay_background"); 
document.body.appendChild(overlayBackground);

var topBar = document.createElement('div'); 
topBar.setAttribute('id', "top_bar");
overlayBackground.appendChild(topBar);


function cancelStuff(){
overlayBackground.removeChild(topBar);
document.body.removeChild(overlayBackground);
}

topBar.innerHTML = "<button id= \"cancel_stuff\" onclick=\"cancelStuff()\">Click To Cancel</button>";

And here is the css:

#cancel_stuff{
zIndex:2147483647;
font-weight:bold;
font-size:2em;
border:none;
width:100%;
height:50px;
color:#FF9900;
background-color:#336688;
}
#cancel_stuff:hover{
cursor: pointer;
color:#336688;
background-color:#FF9900;
}
#top_bar{
zIndex:2147483647;
box-shadow:0px 3px 10px 2px black;
position:fixed;
top:0px;
width:100%;
height:50px;
}
#overlay_background{
float:left;
zIndex:2147483647;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:rgba(240, 240, 240,0.8);
}

Answer 1

You’re looking for the z-index property, not the zIndex property. Try it again with this change and see if it works.

Google uses a z-index of 990 for their top bar, so this should work fine.