title: Why does making the body tag's style "position: relative" cause an absolute-positioned div start lower?
body: <p>If I make a div (at the top of the page) have a <code>margin-top: 10px</code>, then an absolutely positioned div (that is on a higher z-index and outside that div <em>and outside that div's parent</em>) starts not at <code>top: 0px</code> but at <code>10px</code>!</p>
  
  <p><a href="http://jsfiddle.net/afv3gze7/">http://jsfiddle.net/afv3gze7/</a></p>
  
  <p>Why is this? Simply removing the <code>position: relative</code> on the body fixes everything (but causes problems with other things in my code - I need the body positioned relatively).</p>
  
  <p><a href="http://jsfiddle.net/afv3gze7/1/">http://jsfiddle.net/afv3gze7/1/</a></p>
  
  <p><em>Problem Code</em>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              html
              {
                  position: relative;
                  min-width: 100%;
                  height: 100%;
                  min-height:100%;
              }
  
              body
              {
                  min-width: 100%;
                  min-height:100%;
                  font-size: 100%;
              }
              .outer
              {
                  position: relative;
                  top: 0em;
                  left: 0em;
                  width: 100%;
                  height: 100%;
                  background-color: #ffffff;
              }
  
              .overlay
              {
                  position: absolute;
                  top: 0px;
                  left: 0em;
                  width: 100%;
                  height: 100%;
                  background-color: #000000;
                  -moz-opacity: 0.50;
                  -khtml-opacity: 0.50;
                  -webkit-opacity: 0.50;
                  opacity: 0.50;
                  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
                  filter:alpha(opacity=50);
                  z-index: 6;
                  display: none;
              }
  
              .inner
              {
                  position: relative;
                  width: 100%;
                  border: none;
                  margin: 0em;
                  padding: 0em;
                  margin-top: 3.875em;
                  overflow: hidden;
                  z-index: 0;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="outer"&gt;
              &lt;div class="inner"&gt;s&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="overlay" style="display: block;"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>