title: Overlay css not working
body: <p>i'm putting an overlay so that the elements on my page are disabled.
  On my page there are two elements.
  One is an <code>anchor</code> tag and another is a <code>file upload</code> input control.
  File upload control is invisible by default and is triggered on clicking the anchor tag.
  The problem is i have an overlay over these controls but its not working for the invisible file upload control.
  During overlay if i click on the file upload area its triggered.Here is <a href="http://jsfiddle.net/T5E8D/" rel="nofollow">jsfiddle</a>
  Try clicking the PR text in jsfiddle, it shouldn't work due to overlay but is clickable</p>
  
  <p>Here is the html code</p>
  
  <pre><code>&lt;div class="ast"&gt;
  &lt;div class="notEdit-overlay"&gt;&lt;/div&gt;
  &lt;a id="uploadQrCode" href="#" style="cursor:pointer;"&gt;Upload QR Code&lt;/a&gt;
  P&lt;input id="qrCodeFileUpload" type="file" class="hideQRUpload" /&gt;R
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery code</p>
  
  <pre><code>    $('#uploadQrCode').click(function(){
      $('#qrCodeFileUpload').click();
  });
  </code></pre>
  
  <p>And here is the css</p>
  
  <pre><code>    .hideQRUpload
  {
      position:absolute;
      opacity:0;
      width:0px;
      height:0px;
  }
  .notEdit-overlay
  {
      width: 1080px;
      height: 99%;
      left: 0px;
      background: red;
      position: absolute;
      opacity: 0;
      filter: alpha(opacity=0);
  }
  .ast{
      position: relative;
  }
  </code></pre>