如何基于Y轴位置正确设置HTML/JS游戏元素的Z轴层级？

我正在开发一款基于HTML/JS的浏览器游戏，期望实现页面中Y值更高的元素拥有更低的z-index，使其显示在Y值更低的元素后方。目前编写的代码尝试将元素的top定位值设为z-index，但视觉上未达到预期效果。

元素放置代码 #

async start(xx, yy, p, sxx, syy) {
    document.getElementById("htmlIcon").href = `/media/misc/${p}/icon.png`;
    new Promise(async (resolve) => {
      const x = xx;
      const y = yy || xx;
      const sx = sxx || (x * 50) / 2;
      const sy = syy || (y * 50) / 2;
      this.mx = x;
      this.my = y;
      this.inventory.update();
      this.map.style.width = `${x * 50}px`;
      this.map.style.height = `${y * 50}px`;
      this.map.style.overflow = "hidden";
      document.body.style.width = `${x * 50}px`;
      document.body.style.height = `${y * 50}px`;
      this.map.innerHTML = "";
      this.rawMap = [];
      this.layerHandler();
      for (let i = 0; i < y; i++) {
        for (let j = 0; j < x; j++) {
          // Grass
          const tile = document.createElement("img");
          tile.src =
            this.data.tiles.grass.image[
              Math.floor(Math.random() * this.data.tiles.grass.image.length)
            ];
          tile.classList.add("tile");
          tile.style.left = `${i * 50}px`;
          tile.style.top = `${j * 50}px`;
          tile.style.width = `${this.vars(this.data.tiles.grass.size)}px`;
          tile.style.zIndex = 1;
          this.map.appendChild(tile);
        }
      }
      for (let i = 0; i < y; i++) {
        let layer = "";
        for (let j = 0; j < x; j++) {
          const tile = Math.floor(Math.random() * 100);
          if (tile <= 50) {
            // Air
            layer += "null/";
          }
          if (tile <= 75 && tile > 50) {
            // Flowers
            const div = document.createElement("img");
            div.src =
              this.data.tiles.flower.image[
                Math.floor(Math.random() * this.data.tiles.flower.image.length)
              ];
            div.classList.add("tile");
            div.classList.add("breakable");
            div.classList.add("layers");
            const offsetX = this.vars(this.data.tiles.flower.offsetX) * 1;
            const offsetY = this.vars(this.data.tiles.flower.offsetY) * 1;
            div.style.left = `${i * 50 + offsetX}px`;
            div.style.top = `${j * 50 + offsetY}px`;
            div.style.width = `${this.vars(this.data.tiles.flower.size)}px`;
            this.map.appendChild(div);
            layer += "flower/";
          } else if (tile <= 100 && tile > 75) {
            // Trees
            const div = document.createElement("img");
            div.src =
              this.data.tiles.tree.image[
                Math.floor(Math.random() * this.data.tiles.tree.image.length)
              ];
            div.classList.add("tile");
            div.classList.add("breakable");
            div.classList.add("layers");
            const offsetX = this.vars(this.data.tiles.tree.offsetX) * 1;
            const offsetY = this.vars(this.data.tiles.tree.offsetY) * 1;
            div.style.left = `${i * 50 + offsetX}px`;
            div.style.top = `${j * 50 + offsetY}px`;
            div.style.width = `${this.vars(this.data.tiles.tree.size)}px`;
            this.map.appendChild(div);
            layer += "tree/";
          }
        }
        this.rawMap.push(layer);
      }
      // Player
      const entity = this.data.entities.player[p];
      const player = document.createElement("img");
      player.classList.add("entity");
      player.classList.add("layers");
      player.style.left = `${sx}px`;
      player.style.top = `${sy}px`;
      player.style.width = `${entity.size}px`;
      player.id = `player`;
      this.playerSprites = [];
      // Get data URIs of each sprite
      function uri(blob) {
        return new Promise((resolve) => {
          const reader = new FileReader();
          reader.onload = () => {
            resolve(reader.result);
          };
          reader.readAsDataURL(blob);
        });
      }
      await fetch(entity.image + "up.png")
        .then((res) => res.blob())
        .then(async (blob) => this.playerSprites.push(await uri(blob)));
      await fetch(entity.image + "down.png")
        .then((res) => res.blob())
        .then(async (blob) => this.playerSprites.push(await uri(blob)));
      await fetch(entity.image + "left.png")
        .then((res) => res.blob())
        .then(async (blob) => this.playerSprites.push(await uri(blob)));
      await fetch(entity.image + "right.png")
        .then((res) => res.blob())
        .then(async (blob) => this.playerSprites.push(await uri(blob)));
      player.src = this.playerSprites[1];
      this.map.appendChild(player);
      this.track(player);
      this.movement(player, p);
      resolve();
    });
  }

层级处理代码 #

layerHandler(type = ".layers") {
    document.querySelectorAll(type).forEach((elm) => {
      const rect = elm.getBoundingClientRect();
      elm.style.zIndex = Math.floor(rect.top + window.scrollY);
    });
  }

内容的提问来源于stack exchange，提问作者Aka