Почему сгенерированные элементы появляются под родительским элементом? ⇐ CSS

[Гость]

В этом repl.it НЕБО (сгенерированное скриптом) блокирует ЗЕЛЕНЫЙ БЛОК и ПЕРСОНАЖА.

Желаемый результат: чтобы «небо» и «земля» находились ЗА персонажем и зеленым блоком.

Может кто-нибудь объяснить, почему это происходит и как это решить? Я пробовал разные вещи, например, менял порядок в файле CSS, но это не имеет никакого значения.

var Block = document.getElementById("block"); varhole = document.getElementById("дыра"); //добавим это для функции setInterval varcharacter = document.getElementById("символ"); hole.addEventListener('animationiteration', () => { var случайный = -((Math.random() * 300) + 150); var top = (случайный * 100) + 150; hole.style.top = случайный + "px"; }); //интервальная функция запускается каждые 10 миллисекунд setInterval(функция() { вар символовTop = parseInt(window.getComputedStyle(character).getPropertyValue("top")); character.style.top = (characterTop + 3) + «px»; }, 10); * { заполнение: 0; маржа: 0; } #игра { ширина: 400 пикселей; высота: 500 пикселей; граница: 1 пиксель, сплошная зелено-желтая; маржа: авто; переполнение: скрыто; } #характер { ширина: 50 пикселей; высота: 50 пикселей; цвет фона: rgb(255, 0, 149); позиция: абсолютная; верх: 250 пикселей; радиус границы: 50%; } #блокировать { ширина: 50 пикселей; высота: 500 пикселей; цвет фона: зелено-желтый; положение: относительное; слева: 400 пикселей; анимация: блок 2с, бесконечная линейная; } @keyframes блок { 0% { слева: 400 пикселей } 100% { слева: -50 пикселей } } #дыра { ширина: 50 пикселей; высота: 150 пикселей; цвет фона: белый; положение: относительное; слева: 400 пикселей; верх: -500 пикселей; анимация: блок 2с, бесконечная линейная; } .небо { цвет фона: бирюзовый; ширина: 400 пикселей; высота: 500 пикселей; положение: относительное; } .земля { цвет фона: коричневый; ширина: 400 пикселей; высота: 100 пикселей; положение: относительное; верх: 500 пикселей;