Force div to be topmost element of any and all webpages

Question

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!

Answer 1

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.