title: Make Child element appear outside of parent
body: <p>I have a slider on my page that has a height of 200px and has overflow hidden applied, inside this slider there are list items/images which are aall also 200px. When you hover over the image id like to show a tooltip above, my only problem is that the tooltip is hidden due to the overflow rule.</p>
  
  <p>I thought id be able to show the tooltip by giving it a higher z index but that didnt seem to work, can you get child elements to break from their parent? </p>
  
  <p>I hope this makes sense.</p>
  
  <p>In brief my code structure is similar to the below</p>
  
  <pre><code>&lt;div class="clip"&gt;
      &lt;a href="" class="tooltip"&gt;&lt;img src="myimage.jpg" style="height:200px;" /&gt;&lt;span&gt;tooltip stuff&lt;/span&gt;&lt;/a&gt;
      &lt;a href="" class="tooltip"&gt;&lt;img src="myimage.jpg" style="height:200px;" /&gt;&lt;span&gt;tooltip stuff&lt;/span&gt;&lt;/a&gt;
      &lt;a href="" class="tooltip"&gt;&lt;img src="myimage.jpg" style="height:200px;" /&gt;&lt;span&gt;tooltip stuff&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css...</p>
  
  <pre><code>.clip {
      height:200px;
      overflow:hidden;
      width:400px;
  }
  
  .tooltip {
      font-weight:bold;
      position: relative;
  }
  
  .tooltip a {
      font-weight:bold;
  }
  
  .tooltip span {
      margin-left: -999em;
      position: absolute;
  }
  
  .tooltip:hover span {
      background: url("../images/backgrounds/black_arrow_big.png") no-repeat scroll 0 0 transparent;
      font-size: 11px;
      height: 163px;
      left: -100px;
      margin-left: 0;
      padding: 40px 30px 10px;
      position: absolute;
      top: -200px;
      width: 310px;
      z-index: 99;
  }
  </code></pre>