表格内的绝对定位

我需要在 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>

And 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/ http://jsfiddle.net/HgEtQ/

在上面的小提琴中，您可以看到第一个表格单元格工作正常。绝对定位的 div 位于正确的空间中。第二个隐藏了顶部插槽，现在绝对定位不再位于左上角。如果你把两个插槽都取出来，那么绝对定位就真的搞砸了。我需要将其绝对定位，因为某些元素将根据元素进行移动。

这里发生了一些事情。

你有这个：

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

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

另外，绝对定位的元素是从正常流程中移除 http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning所以它不会影响其父级的高度：

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

特别是，这意味着您的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将定位在距顶部 5px 处div.slot距离表格单元格底部 25 像素。

第一个单元工作正常，因为两个单元可见div.slot元素推动div.relative到单元格的顶部，然后div.absolute距离顶部 5pxdiv.relative距离表格单元格顶部 5 像素。

不幸的是，添加position: relative to a <td>就浏览器而言有点狡猾，所以你需要一些黑客技术来正确定位，同时保持vertical-align: bottom。您可以重新构建<td>像这样：

<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/ambiguously/aV4nT/ http://jsfiddle.net/ambiguous/aV4nT/

或者你可以使用visibility: hidden http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility:

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

代替display: none为您.hidden class:

.hidden {
    visibility: hidden;
}

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

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