Question

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

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

像这样：

我的标记：

<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左边的单元格（单元格1和单元格2），并且它会使某些行大于它们应该的行。

有关情况的概述，请参阅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;
}

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

在另一个div中重叠div

2 个答案: