Question

我需要在td中定位具有绝对定位的东西。为了解决在将td设置为relative时未定义td的事实，我在我的td中使用div设置为relative，然后在div中我将内部div设置为absolute。当我的内容填满td时，这一切都很有效。当我将td的内容设置为none时，绝对定位会全部搞砸。

有谁知道为什么会这样。

HTML：

<table>
    <tr>
        <td>
            <div class="relative">
                <div class='absolute'>
                    <p>A</p>
                </div>
            </div>
            <div class="slot"></div>
            <div class="slot"></div>
        </td>
        <td>
          <div class="relative">
             <div class='absolute'>
               <p>B</p>
           </div>
           </div>
           <div class="slot hidden"></div>
           <div class="slot"></div>
        </td>
    </tr>
</table>

和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位于正确的空间中。第二个隐藏了顶部插槽，现在绝对定位不再位于左上角。如果你取出两个插槽，那么它确实搞砸了绝对定位。我需要将它定位为绝对值，因为某些元素会根据元素移动。

Answer 1

这里有几件事情。

你有这个：

td {
    /*...*/
    vertical-align:bottom;
}

这将把细胞的内容推到底部。

此外，绝对定位的元素是removed from the normal flow，因此它不会对其父级的高度做出贡献：

它完全从正常流程中删除（它对后来的兄弟姐妹没有影响）。一个绝对定位的盒子为正常流动儿童和绝对（但不是固定）定位的后代建立一个新的包含块。

特别是，这意味着您的div.relative元素的高度为零，但它们仍然会有一个左上角，因此您的绝对定位偏移量会固定在某处。

然后你有<div class="slot hidden">而hidden会从布局中删除<div>，所以你实际上就是这样：

<div class="relative"></div> <!-- Height zero -->
<div class="slot"></div>     <!-- Height 29px -->

与vertical-align: bottom结合使用意味着您的第二个div.absolute将位于div.slot顶部5px处，距离表格单元格底部25px。

第一个单元格工作正常，因为两个可见的div.slot元素将div.relative向右推到单元格顶部，然后div.absolute位于距{{1}顶部5px处1}}，这是表格单元格顶部的5px。

不幸的是，将div.relative添加到position: relative对于浏览器来说有点狡猾，所以你需要一些hackery来保持<td>的正确定位。您可以像这样重新组织vertical-align: bottom：

<td>

这样的CSS：

<td>
    <div class="relative">
        <div class='absolute'>
            <p>A</p>
        </div>
    </div>
    <div class="nonsense">
        <div class="slot"></div>
        <div class="slot"></div>
    </div>
</td>

实例：http://jsfiddle.net/ambiguous/aV4nT/

或者您可以使用visibility: hidden：

<强>隐藏
生成的框是不可见的（完全透明，没有绘制任何内容），但仍会影响布局。此外，如果元素的后代具有“可见性：可见”，则该元素的后代将是可见的。

而不是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; }类的display: none：

.hidden

这将使两个.hidden { visibility: hidden; }元素占用空间并影响布局，但只会看到第二个元素。

实例：http://jsfiddle.net/ambiguous/RcdNh/

绝对定位在一张桌子里面

1 个答案: