title: Links not clickable because of z-index
body: <p>I have a div with absolute position on a page which overlaps on another div when scrolling. I want to make it invisible when it scrolls to a specific div. </p>
  
  <p>For that purpose, I'm using the <code>z-index</code>. I'm setting the <code>z-index</code> 1 of the div which I want to hide, and much higher <code>z-index</code> for the other div. However it does not hide the div. If I set the <code>z-index</code> to -1 then it hides but then the links on that div are no more clickable. How can I fix this?</p>
  
  <p>Here's my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="up"&gt;&lt;div class="box"&gt;&lt;a href="#"&gt;Should hide&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;   
      &lt;div class="down"&gt;Should be visible&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
      width: 300px;
      position: relative;
      overflow: hidden;
      border: 1px solid #000;
  
  }
  .up{
      height: 100px;   
  }
  
  .box{
      position: absolute;
      top: 20px;
      background: yellow;
      width: 100px;
      height: 100px;
      z-index: -1; 
  }
  
  .down{
      background: green;
      overflow: hidden;
      z-index: 200;
      height: 400px;
  }
  </code></pre>
  
  <p>So the problem in above example is that the links in the .box are not clickable (because of -ve <code>z-index</code> value), and if I set it positive, it wont hide behind the .down.</p>
  
  <p><strong>JSFiddle:</strong>
  <a href="http://jsfiddle.net/G2xRA/">http://jsfiddle.net/G2xRA/</a></p>