title: Overlapping a div within another div
body: <p>I have an HTML table realized as a bunch of divs (for making a scrollable table).</p>
  
  <p>In one of the cells (a div), I want to show a popup which overlaps other cells.</p>
  
  <p>Like so:</p>
  
  <p><a href="http://jsfiddle.net/pFx6m/" rel="nofollow">http://jsfiddle.net/pFx6m/</a></p>
  
  <p>My markup:</p>
  
  <pre><code>&lt;div class="dataRow"&gt;
      &lt;div class="firstCell"&gt;lalala&lt;/div&gt;
      &lt;div class="secondCell"&gt;lululu&lt;/div&gt;
      &lt;div class="thirdCell"&gt;
          &lt;div id="someBigContent"&gt;&lt;/div&gt;  
          &lt;div class="clearRight"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="dataRow"&gt;
      &lt;div class="firstCell"&gt;lalala&lt;/div&gt;
      &lt;div class="secondCell"&gt;lululu&lt;/div&gt;
      &lt;div class="thirdCell"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="dataRow"&gt;
      &lt;div class="firstCell"&gt;lalala&lt;/div&gt;
      &lt;div class="secondCell"&gt;lululu&lt;/div&gt;
      &lt;div class="thirdCell"&gt;lilili&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.dataRow {
      height: 30px;    
      width:300px;
      max-height: 30px;
  }
  
  .dataRow &gt; div {
      display: table-cell;
      height: 30px;
      z-index: 0;
      overflow:hidden;
  }
  
  .firstCell {
      width: 100px;
      height: 10px;
      background-color: blue;
  }
  
  .secondCell {
      width: 100px;
      height: 10px;
      background-color: red;
  }
  
  .thirdCell {
      width: 100px;
      height: 10px;
      background-color: yellow;
  }
  
  .clearRight {
      clear: right;
  }
  
  #someBigContent {
      height:100px;
      width:250px;
      background-color: #000;
      position: relative;
      top: 0px;
      left: -50px;
      float:right;
  
      z-index: 999;
  }
  ​
  </code></pre>
  
  <p>Now I'm doing something wrong, because it doesn't overlap the cells left of the <code>someBigContent</code> (cells one and two) and it makes some rows bigger than they're supposed to be.</p>
  
  <p>See <a href="http://jsfiddle.net/pFx6m/" rel="nofollow">this fiddle</a> for an overview of the situation.</p>
  
  <p>How can I just make the cells overlap (and maybe the content that is under there&nbsp;— not just the table)?</p>