title: Unexpected <body> body behaviour as it's pushed down by child's margin-top
body: <p>HTML problems always look so simple that I nearly feel embarassed asking them. But let it be, I have no idea why this is happening.</p>
  
  <p>In this fiddle <a href="http://jsfiddle.net/o5ee1oag/2/" rel="nofollow">http://jsfiddle.net/o5ee1oag/2/</a> body is being pushed down by header's margin(50px):</p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="background"&gt;&lt;/div&gt;
   &lt;header&gt;
    &lt;ul&gt;
     &lt;li&gt;Button 1&lt;/li&gt;
     &lt;li&gt;Button 2&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/header&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In consequence div#background { position: absolute; } is being pushed down too. Then I go to Firebug, apply background: red; to the body and the whole area gets red, with margin included.</p>
  
  <p>1) Why is this happening, the body is 50px from the top?</p>
  
  <p>2) How do I prevent body from being pushed down?</p>
  
  <p>Thanks :).</p>