title: Div elements in position relative will not stack
body: <p>In summary, I made a container div (parent) with a position: relative, then added 3 children divs with position: absolute. I am now trying to add another div that is below all of this, i.e. the next section of a website. But now the next div appears under the first main &quot;parent&quot; div. From endless searching on here and google I though a main div with position relative would not destroy the flow, but obviously it did or else I would't be posting.</p>
  <p>I now want to have another div outside of the parent so that it will go under this first div and make for a nice, scolling website. Please look at my CSS and help me understand why the absolute elements inside a relative element messed up the flow. (I'm new to CSS, so any pro tips are appreciated!)</p>
  <p><a href="https://i.stack.imgur.com/Zycvg.jpg" rel="nofollow noreferrer">Here is an image of the website so you get a feel</a></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>*{
      margin: 0;
      padding: 0;
      border: 0;
  }
  
  body {
      font-family: 'Noto Sans HK', sans-serif;
  }
  
  /* Arranging the parent and child elements so 
  images can overlap */
  
  .child {
      top: 0;
  }
  .child-1 {
      position: absolute;
      left: 0;
      z-index: 100;
  }
  
  .child-2 {
      position: absolute;
      right: 0;
      z-index: 1;
  }
  
  .child-3 {
      position: absolute;
      padding-top: 38%;
      left: 0;
      
  }
  #parent {
      position: relative;
      height: auto;
      
  }
  
  .hero-text {
      position: absolute;
      text-align: center;
      right: 10vw;
      top: 28vw;
      z-index: 9;
      font-size: 3.5vw;
      float: right;
      color: white;
  }
  
  /* Responsive viewport area, 
  Logo resize based on the screen size */
  
  #logo_png {
      max-width: 25vw;
  }
  
  #hero_img {
      max-width: 85vw;
      
  }
  
  #green_circle_png {
      max-width: 40vw;
  }
  
  /* NAV BAR STYLING */
  
  #container {
  
      position: absolute;
      z-index: 900;
      width: 95%;
      margin: 0 auto;
      
  }
  
  
  nav {
      float: right;
  }
  
  nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  nav li {
      display: inline-block;
      margin-left: 5vw;   /* margin-left obly touches the left margin, not L &amp; R */
      padding-top: 25px;
  
      position: relative;
  }
  
  nav a {
      color: white;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 1.4vw;
  }
  
  nav a:hover {
      color: black;
  }
  
  
  
  .p1 {
      color: #f5f7ff;
      font-size: 10vw;
  }
  #test {
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
      
      
      &lt;div id="parent"&gt;
  
              &lt;div class="child child-1"&gt;
                  &lt;h1&gt;
                      &lt;a href='THIS WILL BE LINK TO HOME PAGE'&gt;
                          &lt;img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/&gt;
                  
                      &lt;/a&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div class="child child-2"&gt;
                  &lt;h1&gt;
                      &lt;img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div class="child child-3"&gt;
                  &lt;h1&gt;
                      &lt;img id="green_circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists"/&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div class="hero-text"&gt;
                  &lt;p&gt;We’re on a mission to teach,
                      &lt;br&gt;guide, and empower the next
                      &lt;br&gt; generation of scientists
                  &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;!-- Div for Nav Bar--&gt;
              &lt;div id="container"&gt; 
  
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Mission&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
          
              &lt;/div&gt;
  
      &lt;/div&gt;
      
  
      
      &lt;div id="test"&gt;
              &lt;h2 class="p1"&gt;Inspiring Education&lt;/h2&gt;
      &lt;/div&gt;
      
      &lt;h2 class="p1"&gt;HELP MEEEE&lt;/h2&gt;
      
      
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>