Force div to be topmost element of any and all webpages
css, google-chrome-extension, html, javascript
Solution
Your z-index is 999. The z-index of the element you are trying to cover in this case (an element with the class .menuDiv attached) has a z-index of 1001. 999 is not by any stretch the max z-index value browsers allow, so your injected div will be below higher z-indexed elements still.
As per one of the comments your question received, see Minimum and Maximum value of Z-INDEX for a discussion on the allowable z-index values and what to use if you are trying to create a max level element (generally +2147483647).
If you know that you don't ever want this element to be layered over by anything (caveat: except potentially elements also using the same), use:
z-index: 2147483647;
You might consider using something slightly lower if you want to retain some flexibility. The few times you might be layered over by a competing element would probably be worth it. So long as your z-index value is near Max, you could also script something to lower any z-indexes above yours to below yours if you don't mind potentially causing some rendering issues with your plugin.
Chrome has a fairly nice built-in inspection tool if you have a similar situation again: right click an element causing you issues, inspect element, and then expand "Computed Style" in the right display area. Note that z-index can be tricky to track (even with "view inherited" turned on): you need to have an appropriately positioned div/etc selected, not static interior elements. Just keep backing out of the nesting until you find it.
Problem
I'm currently building an open-source plugin for Chrome. It's pretty far done -- but there's a couple bugs I'm trying to sort out. Essentially, a div (injected into a page's HTML) that moves throughout any and all webpages needs to be the topmost element so that it's visible. This is achieved by z-index @ 999. On some webpages however, this doesn't work! Off the top of my head, the menu bar when you're logged in at code.google.com overlays my div. How do I force it to be the topmost when injected no matter what a web developer does? Here's my CSS for the div: ``` #ezselected { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; position:absolute; border-radius: 15px; z-index: 999; -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80); -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80); /*box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);*/ pointer-events:none; /* Make click-able through the DIV (for example, if it's on top of something with an event with kb) */ } ``` P.S., I tried !important to no avail. Thanks!