Por que top: 0 não funciona em elementos absolutamente posicionados em relação ao corpo?

Você pode ver no código abaixo que oh1 empurra o corpo e o bloco absolutamente posicionado.absolute não gruda no topo. Mas você também pode ver que o mesmo bloco está preso ao topo de seu pai.wrapper. Por quê?

Não estou perguntando como fazer esse truque; Eu sei como, por exemplo preenchimento em vez de margem para h1 ou clearfix para pai e assim por diante.

Estou interessado em apenas uma coisa: por queh1a margem da empresa empurra abody, mas não está pressionando.wrapper?

body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: silver;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: darkblue;
}

.wrapper {
  position: relative;
  overflow:hidden;
  width: 50%;
  height: 200px;
  overflow: hidden;
  background-color: yellow;
}

.wrapper > .absolute {
  background-color: darkcyan;
}
<div class="absolute"></div>
<h1>Some title</h1>

<div class="wrapper">
  <div class="absolute"></div>
  <h1>Some title</h1>
</div>

OK, vou tentar ser mais claro. Se você clicar no link abaixo, poderá ver o meu JSFiddle. Há simbackground-color: silver nobody etiqueta, rótulo, palavra-chave. Quando olho para o inspetor de código, vejo que a etiqueta do corpo começa um pouco mais baixa devido à margem h1. Masbackground-color começa no topo. Isso significa que o inspetor de código está mentindo para mim e o corpo começa de cima. Mas por que, então, um elemento absolutamente posicionado é filho direto debody não começa no topo?

JSFiddle

questionAnswers(5)

yourAnswerToTheQuestion