Why is margin taken into account for absolute positioned elements?

Question

Assume the following HTML:

 body { margin: 0; padding: 0; background-color: fuchsia; } #item { position: absolute; top: 0; left: 0; margin-top: 20px; margin-left: 10px; background-color: aqua; }

 <div id="item"> Hello </div>

Since the element is absolutely positioned, I'm expecting the margin-top and margin-left properties to be ignored here. However, I find the element aligned 20px to the top and 10px to the left. (Using Chrome 77 here)

Can someone provide an explanation as to why/how the margin are taken into account here ?

Answer 1

Because that's what the spec says:

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset . The element establishes a new block formatting context (BFC) for its contents.

Also: https://www.w3.org/TR/CSS2/visuren.html#propdef-position

...though absolutely positioned boxes have margins, they do not collapse with any other margins.