Du kannst im Code darunter sehen, dass dash1 drückt den Körper und den absolut positionierten Block nach unten.absolute klebt nicht an der Spitze. Sie können aber auch sehen, dass derselbe Block oben auf dem übergeordneten.wrapper. Warum

Ich frage nicht, wie man diesen Trick macht; Ich weiß wie, z.B. padding statt margin to h1 oder clearfix to parent und so weiter.

Ich interessiere mich nur für eine Sache: warumh1er Rand von @ drückt das @ nach untbody, drückt aber nicht nach unten.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, ich werde versuchen, klarer zu sein. Wenn Sie auf den Link unten klicken, können Sie meine JSFiddle sehen. Es gibtbackground-color: silver in dembody Etikett. Wenn ich in den Codeinspektor schaue, sehe ich, dass das Body-Tag aufgrund des h1-Randes etwas niedriger beginnt. Aberbackground-color beginnt oben. Dies bedeutet, dass der Code Inspector mich anlügt und der Körper von oben beginnt. Aber warum dann ein absolut positioniertes Element, das ein direktes Kind von @ isbody nicht oben anfangen?

JSFiddle