我需要在td中定位具有绝对定位的东西.为了解决在将td设置为relative时未定义td的事实,我在我的td中使用div设置为relative,然后在div中我将内部div设置为absolute.当我的内容填满td时,这一切都很有效.当我将td的内容设置为none时,绝对定位会全部搞砸.
有谁知道为什么会这样.
HTML：
和CSS：
td{
border:1px solid red;
width:100px;
height:60px;
vertical-align:bottom;
}
.slot{
width:100px;
height:29px;
background-color:#999;
border:1px dashed blue;
}
.relative{
position:relative;
}
.absolute{
position:absolute;
top:5px;
left:5px;
}
.hidden{
display:none;
}
现场版：http://jsfiddle.net/HgEtQ/
在上面的小提琴中,您可以看到第一个表格单元格正常工作.绝对定位的div位于正确的空间中.第二个隐藏了顶部插槽,现在绝对定位不再位于左上角.如果你取出两个插槽,那么它确实搞砸了绝对定位.我需要将它定位为绝对值,因为某些元素会根据元素移动.
你有这个：
td {
/*...*/
vertical-align:bottom;
}
此外,绝对定位的元素是removed from the normal flow,因此它不会对其父级的高度做出贡献：
It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned Box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants.
特别是,这意味着你的div.relative元素的高度为零,但它们仍然会有一个左上角,所以你的绝对定位偏移量会被固定在某个地方.
然后你有< div class =“slot hidden”>并隐藏删除< div>从布局,所以你有效地拥有这个：
结合vertical-align：bottom意味着你的第二个div.absolute将位于div.slot顶部5px,距离表格底部25px.
第一个单元格工作正常,因为两个可见的div.slot元素将div.relative右推到单元格的顶部,然后div.absolute位于div.relative顶部5px,距离顶部5px表格单元格.
不幸的是,添加位置：相对于< td>对于浏览器来说有点狡猾,所以你需要一些hackery来保持你的定位,同时保持vertical-align：bottom.您可以像这样重新组织< td>：
这样的CSS：
td{
border:1px solid red;
width:100px;
height:60px;
vertical-align: top;
}
.slot{
width:100px;
height:29px;
background-color:#999;
border:1px dashed blue;
}
.relative {
position:relative;
}
.nonsense {
height: 62px; /* td[height] + 2 for the borders */
display: table-cell;
vertical-align: bottom;
}
.absolute{
position:absolute;
top:5px;
left:5px;
}
.hidden{
display:none;
}
实例：http://jsfiddle.net/ambiguous/aV4nT/
或者你可以使用visibility: hidden：
hidden
The generated Box is invisible (fully transparent,nothing is drawn),but still affects layout. Furthermore,descendants of the element will be visible if they have ‘visibility: visible’.
你的.hidden类代替display：none：
.hidden {
visibility: hidden;
}
这将使div.slot元素占用空间并影响布局,但只会看到第二个.
原文链接：https://www.f2er.com/html/425776.html