title: Why doesn't top: 0 work on absolutely-positioned elements relative to body?
body: <p>You can see in the code below that the <code>h1</code> pushes down the body and the absolutely-positioned block <code>.absolute</code> does not stick to the top. But you also can see that the same block is stuck to the top of its parent <code>.wrapper</code>. Why?</p>
  
  <p>I'm not asking how to do that trick; I know how, e.g. padding instead margin to h1, or clearfix to parent and so on.</p>
  
  <p>I'm interested in only one thing: why <code>h1</code>'s margin pushes down the <code>body</code>, but is not pushing down <code>.wrapper</code>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; .absolute {
    background-color: darkcyan;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="absolute"&gt;&lt;/div&gt;
  &lt;h1&gt;Some title&lt;/h1&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div class="absolute"&gt;&lt;/div&gt;
    &lt;h1&gt;Some title&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>OK, I'll try to be more clear. If you click on the link below, you can see my JSFiddle. There is <code>background-color: silver</code> in the <code>body</code> tag. When I look in the code inspector, I see that the body tag begins slightly lower due to the h1 margin. But <code>background-color</code> begins at the top. This means that the code inspector is lying to me, and body begins from top. But why, then, does an absolutely-positioned element that's a direct child of <code>body</code> not start at the top?</p>
  
  <p><a href="http://jsfiddle.net/86yk24zh/" rel="noreferrer">JSFiddle</a></p>