13

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!

aeharding
  • 486
  • 1
  • 4
  • 13
  • 5
    Well `z-index:999` obviously isn't going to put the element on top of other elements that have `z-index:1000` or higher... – nnnnnn Dec 06 '12 at 20:47
  • 1
    exactly, this might be helpful: http://stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index – lbstr Dec 06 '12 at 20:48
  • Sometimes, if the `parent element` has `overflow: hidden`, you might not be able to see the element even if it is top most and set to absolute with a high `z-index`. Good Luck... – Aakash Apr 14 '18 at 07:41

1 Answers1

17

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.

Community
  • 1
  • 1
taswyn
  • 4,463
  • 2
  • 20
  • 34
  • Thanks for the tips. Very cool to hear about that theoretical limit. Unfortunately -- my problem is still occurring (clearing cache etc). Is there any other thing that affects z-layering and what's topmost? – aeharding Dec 06 '12 at 22:21
  • To test, I attached your css to the code.google.com/p/chromium page. I then added a div (to the body) using the ezselected id attribute and put some test text inside it, but overrode the width and top to make sure it would partially overlap the top right menu area. With the z-index you started with, it would be under the menu drop downs. Raising the z-index above what google used for those (1001) fixed it. You may have something else in your css overriding at some other point, or if you have more internal elements that are using non static positioning they may be taking a different z-index? – taswyn Dec 06 '12 at 22:48
  • Try inspecting your own element as rendered and seeing what the computed z-index is. – taswyn Dec 06 '12 at 23:30