我有一个实现为一堆 div 的 HTML 表格(用于制作可滚动的表格)。
在其中一个单元格(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
左侧的单元格(单元格一和二)重叠,并且它使某些行比预期的要大。
参见 this fiddle了解情况概况。
我怎样才能让单元格重叠(也许下面的内容——而不仅仅是表格)?
最佳答案
使用该 CSS block #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;
}
现在您可以调整此 block 相对于父单元格的位置。
关于css - 在另一个 div 中重叠一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11846276/