Почему маржа учитывается для элементов с абсолютным позиционированием?

Question

Допустим следующее 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>

Поскольку элемент абсолютно позиционирован, я ожидаю, что свойства margin-top и margin-left здесь будут игнорироваться. Тем не менее, я считаю, что элемент выровнен на 20 пикселей сверху и на 10 пикселей слева. (Используя здесь Chrome 77)

Может ли кто-нибудь объяснить, почему / как здесь учитывается маржа?

Answer 1

Потому что это то, что говорит spe c:

Абсолютно позиционированный элемент - это элемент, вычисленное значение позиции которого является абсолютным или фиксированным. Свойства top, right, bottom и left определяют смещения от краев содержащего элемента блока. (Содержащий блок является предком, относительно которого позиционируется элемент.) Если элемент имеет поля, они добавляются к смещению . Элемент устанавливает новый контекст форматирования блока (BF C) для его содержимого.

Также: https://www.w3.org/TR/CSS2/visuren.html#propdef -положение

. ... хотя поля с абсолютным позиционированием имеют поля, они не разрушаются вместе с другими полями.