title: margin affects other fixed elements position
body: <p>I wanted to set a top header in a fixed position and have content scroll underneath it and came across some strangeness. If I set a margin-top to the content div that margin would also affect the header and move it down even though it's set to position:fixed. I found a workaround by setting the content div to position:relative and using top: to offset it the same amount, but I find it strange that a non-nested div can affect a fixed-positioned element and would like to know why it happens.</p>
  
  <p>I get the same thing in Safari, Firefox and Chrome. In Opera the margin pushes down the content and leaves the header in place, which is what I expected it to do, but compared to the other results maybe it's Opera that has it wrong. What I'm talking about can be in seen in <a href="http://jsfiddle.net/U2Ln6/38/" rel="noreferrer">this JSFIDDLE</a> (don't use Opera! :) ).</p>
  
  <p>Here's the code:</p>
  
  <p>css:</p>
  
  <pre><code>body {
      background:#FFD;
  }
  
  #header {
      position:fixed;
      height:15px;
      width:100%;
      text-align:center;
      border-bottom:1mm dashed #7F7F7F;
      background-color:#EEE;
  }
  
  #content {
      width:90%;
      margin-top:25px;
      margin-left:auto;
      margin-right:auto;
      background-color:#E5E5FF;
      border: 1px solid #000;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="header"&gt;
          HEADER
      &lt;/div&gt;
      &lt;div id="content"&gt;
          &lt;p&gt;Text1&lt;/p&gt;
          &lt;p&gt;Text2&lt;/p&gt;
          &lt;p&gt;Text3&lt;/p&gt;
          &lt;p&gt;Text4&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>