1

根据我的理解，一个绝对定位的元素应该在它应该在的任何位置，如果没有指定顶部或左侧（除了它不占用“布局”空间）。但在这个链接中，它似乎有 margin-top:10px; 放。

<table>
    <tr>
        <td>
            <div>default position</div>
        </td>
        <td>
            <div style="position: absolute;">absolute position</div>
        </td>
    </tr>
</table>

div
{
    border: red 1px dotted;
}
td
{
    border: green 1px solid;
}

有人可以解释一下吗？

4

3 回答 3

2

td-elements 的默认 valign 是 center，因此绝对定位的元素将垂直对齐到中心。由于默认情况下它位于左上角，因此它将左上角放置在其容器的垂直中心。

尝试在包含绝对定位元素的 td 元素上设置 valign="top"，您将看到“边距”消失。

于 2012-10-15T14:48:59.757 回答
2

原因很简单。根据规范，absolute定位元素位于文档流之外，它也被放置在“相对于它的包含块”中。因此，在不指定位置的情况下，它的上/左角被放置在td单元格的中心。

本例使用topandleft来移动它。

于 2012-10-15T14:52:25.633 回答
-2

我不知道为什么它会增加额外的边距，但解决它的一种简单方法是为它设置一个位置，比如top: 0px;or top: 10px;。

于 2012-10-15T14:35:32.720 回答