title: Why are generated elements appearing below their parent element?
body: <p>In this <a href="https://repl.it/@iamapersonthing/flappybirdsstage2" rel="nofollow noreferrer">repl.it</a> the SKY (generated by the script) is blocking the GREEN BLOCK and the CHARACTER.</p>
  <p>Desired output: For the &quot;sky&quot; and &quot;ground&quot; to be BEHIND the character and the green block.</p>
  <p>Can someone explain why this is occurring and how to solve it? I have tried various things such as changing the order in the CSS file, but that doesn't make any difference.</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-js lang-js prettyprint-override"><code>var block = document.getElementById("block");
  var hole = document.getElementById("hole");
  //add this for the setInterval function
  var character = document.getElementById("character");
  
  hole.addEventListener('animationiteration', () =&gt; {
    var random = -((Math.random() * 300) + 150);
    var top = (random * 100) + 150;
    hole.style.top = random + "px";
  });
  
  //interval function runs every 10 milliseconds
  setInterval(function() {
    var characterTop =
      parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    character.style.top = (characterTop + 3) + "px";
  
  }, 10);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
  }
  
  #game {
    width: 400px;
    height: 500px;
    border: 1px solid greenyellow;
    margin: auto;
    overflow: hidden;
  }
  
  #character {
    width: 50px;
    height: 50px;
    background-color: rgb(255, 0, 149);
    position: absolute;
    top: 250px;
    border-radius: 50%;
  }
  
  #block {
    width: 50px;
    height: 500px;
    background-color: greenyellow;
    position: relative;
    left: 400px;
    animation: block 2s infinite linear;
  }
  
  @keyframes block {
    0% {
      left: 400px
    }
    100% {
      left: -50px
    }
  }
  
  #hole {
    width: 50px;
    height: 150px;
    background-color: white;
    position: relative;
    left: 400px;
    top: -500px;
    animation: block 2s infinite linear;
  }
  
  .sky {
    background-color: aqua;
    width: 400px;
    height: 500px;
    position: relative;
  }
  
  .ground {
    background-color: brown;
    width: 400px;
    height: 100px;
    position: relative;
    top: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sky"&gt;
    &lt;div class="ground"&gt;
      &lt;div id="game"&gt;
        &lt;div id="block"&gt;&lt;/div&gt;
        &lt;div id="hole"&gt;&lt;/div&gt;
        &lt;div id="character"&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>