Почему top: 0 не работает с абсолютно позиционированными элементами относительно тела?

Вы можете увидеть в коде ниже, чтоh1 толкает вниз корпус и абсолютно позиционированный блок.absolute не прилипает к вершине. Но вы также можете видеть, что тот же блок застрял на вершине своего родителя.wrapper, Зачем?

Я не спрашиваю, как сделать этот трюк; Я знаю как, например вместо этого добавляется отступ к h1 или clearfix для parent и так далее.

Меня интересует только одно: почемуh1запас толкаетbody, но не отталкивает.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>

Хорошо, я постараюсь быть более ясным. Если вы нажмете на ссылку ниже, вы увидите мой JSFiddle. Естьbackground-color: silver вbody тег. Когда я смотрю в инспекторе кода, я вижу, что тег body начинается немного ниже из-за поля h1. Ноbackground-color начинается сверху. Это значит, что инспектор кода врет мне, а тело начинается сверху. Но почему же тогда абсолютно позиционируемый элемент, который является прямым потомкомbody не начать сверху?

JSFiddle

Ответы на вопрос(5)

Ваш ответ на вопрос