css - 在另一个 div 中重叠一个 div

Question

我有一个实现为一堆 div 的 HTML 表格（用于制作可滚动表格）。

在其中一个单元格（一个 div）中，我想显示一个与其他单元格重叠的弹出窗口。

像这样：

http://jsfiddle.net/pFx6m/

我的标记：

<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">
        <div id="someBigContent"></div>  
        <div class="clearRight"></div></div>
    </div>

<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">

    </div>
</div>
<div class="dataRow">
    <div class="firstCell">lalala</div>
    <div class="secondCell">lululu</div>
    <div class="thirdCell">lilili</div>
</div>​

我的 CSS：

.dataRow {
    height: 30px;    
    width:300px;
    max-height: 30px;
}

.dataRow > 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;
}
​

现在我做错了，因为它没有与someBigContent（单元格一和二）左侧的单元格重叠，并且它使一些行比他们应该的要大。

有关情况的概述，请参见this fiddle 。

我怎样才能让单元格重叠（可能还有下面的内容——不仅仅是表格）？

Answer 1

看到一个用 div 做的表是很奇怪的...

但尝试在 CSS 中添加

max-width: 100px !important;

对于爆发的 div/table 事情？

Answer 2

使用该 CSS 块#someBigContent将不会影响行或单元格的大小：

.dataRow {
    height: 30px;    
    width:300px;
    max-height: 30px;
}

.dataRow > div {
    display: relative;
    float: left;
    height: 30px;
    z-index: 0;
}

.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: absolute;
    top: 10px;
    left: 10px;        
    z-index: 999;
}

现在您可以调整此块相对于父单元格的位置。