Z 层 CSS 和 z-index

Question

管道出现在地面和天空的前面。当我试图将它们放在顶部（白色天空）和底部（地面）后面而不是蓝色区域时，它不允许我这样做。我尝试过使用 z-index 但它会将它们移到除了身体之外的所有东西后面。我项目中的背景是图像，这就是为什么有一根管子有一个“y”翻转。

var pos = -40;
var marginTop = pos + "em";
var gravetat = 0.04;
var gravetat_em = gravetat + "em";
var left_tubs = 20;
var left_tubs_em = left_tubs + "em";
var top_dalt = 0;
var top_dalt_em = top_dalt + "em";
var top_baix = 9.3;
var top_baix_em = top_baix + "em";
var score = -1;

function m() {
  document.getElementById("marcador").value = 0;
}
setTimeout(m, 0);

function moure() {
  pos = pos - 3.4;
  marginTop = pos + "em";
  document.getElementById("pajarito").style.marginTop = marginTop;
}
document.addEventListener("keypress", moure);

function caiguda() {
  pos = pos + gravetat;
  marginTop = pos + "em";
  document.getElementById("pajarito").style.marginTop = marginTop;
}
var a = setInterval(caiguda, 1);

function petits() {
  left_tubs = 20;
  left_tubs_em = left_tubs + "em";
  top_dalt = -20;
  top_dalt = top_dalt + 30 * Math.random();
  top_dalt_em = top_dalt + "em";
  top_baix = 9.3 + top_dalt;
  top_baix_em = top_baix + "em";
  const dalt = document.createElement('div');
  dalt.classList.add("dalt");
  var fill = document.getElementById("joc").appendChild(dalt);
  fill.style.left = left_tubs_em;
  fill.style.top = top_dalt_em;
  const baix = document.createElement('div');
  baix.classList.add("baix");
  var fill_baix = document.getElementById("joc").appendChild(baix);
  fill_baix.style.left = left_tubs_em;
  fill_baix.style.top = top_baix_em;

  function lol() {
    left_tubs = left_tubs - 0.05;
    left_tubs_em = left_tubs + "em";
    fill.style.left = left_tubs_em;
    fill_baix.style.left = left_tubs_em;
  }
  var loly = setInterval(lol, 1);

  function borrar() {
    fill.remove();
    fill_baix.remove();
    clearInterval(loly);
  }
  setTimeout(borrar, 3380);
  score = score + 1;
  document.getElementById("marcador").value = score;
}
setTimeout(petits, 0);
var b = setInterval(petits, 3390);

function topes() {
  const cel = -55;
  const terra = -7;
  const front = -9;
  const cua = -16;
  const alt = -35.6 + top_dalt;
  const sota = -26.9 + top_dalt;
  if ((pos >= terra || pos <= cel) || ((left_tubs <= front && left_tubs >= cua) && (pos <= alt || pos >= sota))) {
    clearInterval(a);
    clearInterval(b);
    clearInterval(c);
    document.getElementById("pajarito").classList.add("invisible");
    document.getElementById("marcador").value = "Game over";
  }
}
var c = setInterval(topes, 1);

body {
  background-color: #001c5a;
}

#quadrat {
  background-color: black;
  width: 45rem;
  height: 55.75rem;
  border: 0.35rem solid black;
}

#cel {
  background-color: white;
  width: 100%;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

#joc {
  background-color: blue;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
  /*500x580*/
  width: 100%;
  height: 49rem;
  border: none;
}

#marcador {
  margin: 0;
  margin-top: -30rem;
  padding: 0;
  width: 100%;
  height: 2em;
  text-align: center;
  font-family: Tahoma;
  font-weight: bolder;
  font-size: xx-large;
  color: white;
  background: transparent;
  border: none;
}

#pajarito {
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  margin-top: -36em;
  margin-left: -25em;
  /*
    margin-top: -7em;
    margin-left: -25em;
    */
  padding: 0;
  /*60x45*/
  width: 3rem;
  height: 2.25rem;
}

.dalt {
  background-color: green;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  position: relative;
  top: 0em;
  left: 20em;
  /* left: 20em; i xoc entre -9 i -16*/
  padding: 0;
  /*60x300*/
  width: 4em;
  height: 20em;
  border: none;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.baix {
  background-color: green;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  position: relative;
  top: 10.3em;
  left: 20em;
  padding: 0;
  width: 4em;
  height: 20em;
  border: none;
}

#terra {
  background-color: brown;
  background-repeat: no-repeat;
  background-size: cover;
  margin: -0.25rem;
  padding: 0;
  /*500x150*/
  width: 100%;
  height: 6rem;
  border: none;
  z-index: -1;
}

.invisible {
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

<html>

<head>
  <link rel="stylesheet" href="b.css">
  <script src="c2.js"></script>
  <title>FloppyBord</title>
</head>

<body>
  <center>
    <div id="quadrat">
      <div id="cel"></div>
      <div id="joc"></div>
      <div id="terra">
        <input id="marcador" value="0" disabled>
      </div>
      <div id="pajarito"></div>
    </div>
  </center>
</body>

</html>

谢谢你的帮助。