title: Child div behind parent div, how to fix link?
body: <p>I'm trying to put a child <code>&lt;div&gt;</code> (with a link in it) behind its parent <code>&lt;div&gt;</code>, but the links doesn't work. </p>
  
  <p>I am using <code>z-index: -1</code>, so maybe the link is being drawn "behind" the <code>&lt;body&gt;</code>.</p>
  
  <p>Is there a way to achive this without breaking the link?</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>The CSS</p>
  
  <pre><code>    .front {
          width: 200px;
          height: 200px;
          background: #EA7600;
          -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
          -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
          box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
      }
  
      .back {
          width: 300px; height: 50px; background: #93CDFB;
          position: absolute;
          left: 100px;
          text-align: right;
          padding: 5px;
      }
  </code></pre>
  
  <hr>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div class="front"&gt;
  
  &lt;div class="back"&gt;
  
  &lt;a href="http://www.stackoverflow.com"&gt;This link works&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &amp;nbsp;
  
  
  &lt;div class="front" style="z-index: 1"&gt;
  
  &lt;div class="back" style="z-index: -1"&gt;
  
  &lt;a href="http://www.stackoverflow.com"&gt;This link doesn't work&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>The Result</p>
  
  <p><a href="http://img832.imageshack.us/img832/8137/screenshot20100723at105.png" rel="nofollow noreferrer">alt text http://img832.imageshack.us/img832/8137/screenshot20100723at105.png</a></p>