Question

From my understanding, an absolutely positioned element should be wherever it should be as it would normally if no top or left was specified (aside from it doesn’t occupy “layout” space). But in this link it seems as it is having margin-top:10px; set.

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

Can somebody explain this?

Answer 1

The reason is simple. As per the spec, the absolute positioned element is outside of the document flow and it’s also placed “with respect to its containing block”. So therefore, without specifying the position, it’s top/left corner is placed in the center of the td cell.

This example uses top and left to move it.