绝对的位置是一些优势

Question

根据我的理解，一个绝对定位的元素应该是它应该的位置，正如通常没有指定顶部或左边（除了它不占用“布局”空间）。但是在这个link中，似乎它具有边缘顶部：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;
}

有人可以解释一下吗？

Answer 1

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

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

Answer 2

原因很简单。根据{{​​3}}，absolute定位元素为the spec，而outside of the document flow。因此，在没有指定位置的情况下，它的左上角位于td单元格的中心。

also placed "with respect to its containing block"

Answer 3

我不知道为什么它会增加额外的保证金，但一个简单的方法就是设置一个位置，例如top: 0px;或top: 10px;。