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!