表格内的绝对定位

Question

我需要在 td 内使用绝对定位来定位某些内容。为了解决 td 在将其设置为相对时未定义的事实，我在 td 内使用设置为相对的 div，然后在该 div 内将内部 div 设置为绝对。当我有内容填满 td 时，这一切都非常有效。当我将 td 的内容设置为不显示时，绝对定位就会全部搞砸。

有谁知道为什么会这样。

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;
}

这会将单元格的内容推到底部。

此外，绝对定位的元素从正常流程中删除，因此它不会影响其父级的高度：

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

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

然后你有

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

与 vertical-align: Bottom 结合意味着您的第二个 div.absolute 将位于距 div.slot< 顶部 5px 的位置/code> 即 25px从表格单元格的底部。

第一个单元格工作正常，因为两个可见的 div.slot 元素将 div.relative 向右推到单元格的顶部，然后是 div.absolute code> 距离 div.relative 顶部 5 像素，即距离表格单元格顶部 5 像素。

不幸的是，就浏览器而言，将 position:relative 添加到 有点狡猾，因此您需要一些技巧来正确定位，同时保持 <代码>垂直对齐：底部。您可以像这样重新构造 ：

<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>

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/ambigously/aV4nT/

或者你可以使用 可见性：隐藏：

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

而不是 .hidden 类的 display: none ：

.hidden {
    visibility: hidden;
}

这将使两个 div.slot 元素占用空间并影响布局，但只有将看到第二个。

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