title: Why is an element with position: fixed moving with a non-positioned sibling?
body: <p>There are a lot of questions on S.O. that cover the answer to how to fix this (add <code>top: 0</code>), but none of them attempt to actually explain the reasoning behind the header movement. I'm more curious as to why this is the case.</p>
  
  <pre><code>&lt;header&gt;Project Header&lt;/header&gt; 
  &lt;main class="container" id="layout-mainContent"&gt;
      &lt;div class="row" id="first-row"&gt;somecontent&lt;/div&gt;
  &lt;/main&gt;
  
  header {
     position: fixed;
  }
  
  #layout-maincontent {
     margin-top: 90px;  //moves header down.
  }
  </code></pre>
  
  <p>List of like-questions but with no reasoning:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/14001219/topmost-fixed-position-div-moving-with-non-position-div">Topmost &#39;fixed&#39; position div moving with non position div</a></li>
  <li><a href="https://stackoverflow.com/questions/9625093/margin-affects-other-fixed-elements-position/9626502#9626502">margin affects other fixed elements position</a></li>
  <li><a href="https://stackoverflow.com/questions/35742079/margin-top-div-causes-fixed-header-div-to-move-down">margin-top div causes fixed header div to move down</a></li>
  </ol>
  
  <p>It seems reasonable to think that the fixed header sticks to the top of the browser window and should not move because of another non-positioned, non-child, non-parent div (aka sibling). Esp. because the fixed header is outside of normal document flow. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning" rel="noreferrer">MDN on Fixed Positioning</a></p>
  
  <p><strong>Hypothesis:</strong>
  The confusion stems from the idea that fixed elements are relative to the browser window. This is true, but is calculated using the viewport. The viewport is calculated using elements that are within the regular document flow. Because the first div that is within document flow is the non-header div, the viewport starts after the margin-top is applied. This is just speculation and I would love to see someone confirm or correct me.</p>