title: Force div to be topmost element of any and all webpages
body: <p>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!</p>
  
  <p>Off the top of my head, the menu bar when you're logged in at code.google.com overlays my div.</p>
  
  <p>How do I force it to be the topmost when injected no matter what a web developer does?</p>
  
  <p>Here's my CSS for the div:</p>
  
  <pre><code>#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) */
  }
  </code></pre>
  
  <p>P.S., I tried !important to no avail.</p>
  
  <p>Thanks!</p>