title: IE Scrollbar + Overflow Scroll + div on top of the
body: <p>I have two divs. One div (copy) has a css overflow property set to auto. The other div (overlay) sits on top. I can not change the z-index of these two divs, because visually the overlay needs to be on top of the copy. In IE9, the scrollbar for the 'copy' div is not clickable/useable. In Chrome, it works fine because I am using the pointer-events property. How can I get this example to work in IE9? I need to be able to scroll the content.</p>
  
  <p>CSS</p>
  
  <pre><code>#overlay{
      width:400px;
      height:200px;
      position:absolute;
      display:block;
      background-color:#990000;
      z-index:2;
      opacity:.2;
      pointer-events:none;
  }
  #copy{
      overflow:auto;
      width:300px;
      height:200px;
      position:absolute;
      overflow-y: scroll;
      overflow-x: hidden;
      z-index:1;
  </code></pre>
  
  <p>}</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;div id="copy"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in felis elit. Mauris elementum mi non mauris euismod interdum. Morbi auctor velit lacinia augue vehicula vel egestas tortor scelerisque. Sed quis arcu massa, quis elementum ligula. Nunc et quam id ipsum consequat ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in felis elit. Mauris elementum mi non mauris euismod interdum. Morbi auctor velit lacinia augue vehicula vel egestas tortor scelerisque. Sed quis arcu massa, quis elementum ligula. Nunc et quam id ipsum consequat ullamcorper.&lt;/div&gt;
  </code></pre>
  
  <p>See an example here: 
  <a href="http://jsfiddle.net/7w4Jh/1/" rel="nofollow">http://jsfiddle.net/7w4Jh/1/</a></p>
  
  <p>Remember, the example works fine in webkit browsers. The issue only occurs in Internet Explorer (9)</p>