title: Add the Ability to click on buttons in DIV that is behind other DIV
body: <p>I have a button that is on a div, that is behind another div. The second div overlaps the first by using the css:</p>
  
  <pre><code>position: absolute;
  </code></pre>
  
  <p>Therefore the button is not clickable. Is there any way I can make it clickable like a normal button?</p>
  
  <p>Example: <a href="http://jsfiddle.net/U8c8T/" rel="nofollow">jsfiddle</a></p>
  
  <p><em>HTML :</em></p>
  
  <pre><code>&lt;div class="stack"&gt;
      &lt;div class="background" onclick="alert('background clicked');"&gt;
          &lt;button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;"&gt;This is a background button&lt;/button&gt;
          &lt;div class="card"&gt;
              &lt;button onclick="alert('card-button clicked');"&gt;This is a card button&lt;/button&gt;
              &lt;textarea style="left:100px; top:100px; position: absolute;"&gt;This is a card textarea&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>CSS :</em></p>
  
  <pre><code>body {
      background-color: blue;
  }
  .stack {
      width: 320px;
      height: 240px;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: white;
      margin-top:-120px;
      margin-left:-160px;
  }
  .background {
      width: 320px;
      height: 240px;
      background-image:url('http://www.userlogos.org/files/logos/ps1d3r/apple-black-i.png');
      top:0px;
      left:0px;
      position: absolute;
  }
  .card {
      pointer-events:none;
      width: 320px;
      height: 240px;
      background-image:url('http://2.bp.blogspot.com/-OIHQM4x8l0U/UEiDLQyiTRI/AAAAAAAAHFs/i1a6rkqQ8tQ/s320/floral+swirl.png');
      top:0px;
      left:0px;
      position: absolute;
  }
  </code></pre>