title: CSS positioning div one after another
body: <p>I am trying to create a landing page where I am planning to position some fixed background image as a slideshow fixed at top and then another div with where it goes what the website is about. However the current HTML and CSS code puts the two divs on top of each other. </p>
  
  <p>Upon checking with the existing code and working with the position property and setting the parent div as relative position with the child divs as relative doesn't work either</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>.crossfade&gt;figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center;
    color: transparent;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    min-height: 700px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #landing {
    position: absolute;
    top: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="main"&gt;
    &lt;div class="crossfade"&gt;
      &lt;figure&gt;&lt;/figure&gt;
      &lt;figure&gt;&lt;/figure&gt;
    &lt;/div&gt;
    &lt;div id="landing"&gt;
      &lt;div className="container"&gt;
        &lt;img /&gt;
      &lt;/div&gt;
      &lt;p&gt; Hello &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The expected css should be placing the two divs one after another while preserving the top background image slideshow and then showing the second div.</p>