title: How to position a relative element after a fixed element
body: <p>I am stuck in my attempt to get a <code>position:relative</code> element to display after a <code>position:fixed</code> element. As you can see in my snippet there is a green section and a blue one. The blue section is the fixed element, and the green being the relative element. With <code>padding-top</code> I can get the content of this section to start after the fixed element, but then the <code>padding-top</code> basically hides the fixed section.</p>
  
  <p>How am I able to place the relative section 100vh from the top of the screen, so it enables the fixed section to be 100vh? Then when scrolling down the relative section starts to show.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#page-wrap {
   margin-top: 70px;
   max-width: 100%;
  }
  #homeMain {
   width: 100%;
   height: 100vh;
   position: fixed;
    background: blue;
  }
  #sectionCover {
   position: relative;
   padding-top: 100vh;
   /*z-index: 1;*/
   height: auto;
   width: 100%;
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="page-wrap"&gt;
    &lt;section id="homeMain"&gt;
      &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;/section&gt;
    &lt;div id="sectionCover"&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;&lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;&lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;p&gt;fndskjafndoaf&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>