title: Get a child div to appear above absolutely positioned parent
body: <p>Is it possible to get a div, inside an absolutely position div, to show above it's parent, but aligned to it so the top of the child div is square with the bottom of the parent div and the child div is now above other parents on the same level as it's own parent ?</p>
  
  <p>e.g I have a page with square blocks on it, say four rows of four. Inside each block, is a child element which shows on rollover, aligned to the bottom of the parent block and over the top of blocks adjacent to the parent block.</p>
  
  <p>The parent blocks are absolutely positioned</p>
  
  <p><a href="http://jsfiddle.net/W3Kaq/" rel="nofollow">http://jsfiddle.net/W3Kaq/</a></p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div class="parent"&gt;
  Some Box
  &lt;div class="child"&gt;
      Some Child Box
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent" style="left:140px;"&gt;
  Some Box
  &lt;div class="child"&gt;
      Some Child Box
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent" style="top:140px;"&gt;
  Some Box
  &lt;div class="child"&gt;
      Some Child Box
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="parent" style="top:140px; left:140px;"&gt;
  Some Box
  &lt;div class="child"&gt;
      Some Child Box
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  #container {
  position: relative;
  }
  
  .parent {
  background: #444;
  color: #fff;
  display: block;
  height: 100px;
  padding: 10px;
  position: absolute;
  width: 100px;
  z-index: 2;
  }
  
  .child {
  background: #777;
  display: none;    
  height: 300px;
  position: absolute;
  z-index: 3;
  }
  
  .parent:hover .child {
  display: block;
  }
  </code></pre>