如何将div置于canvas元素之上？现有代码失效问题求助

你的核心问题是错误地将div作为canvas的子元素插入——canvas属于HTML替换元素，无法承载其他HTML子节点，所以你添加的div不会被正常渲染，这也是调整z-index和延迟执行都无效的原因。

只需要修改div的插入目标，把它和canvas放在同一个父容器下，再配合定位设置就能实现效果：

修改后的代码 #

window.onload = () => {
  a().then(() => {
    b();
  });
}

const b = () => {
  return new Promise((resolve, reject) => {
    const d = document.createElement("div");
    d.setAttribute("id", "div-on-canvas");
    d.style.setProperty("position", "absolute");
    d.style.setProperty("top", "50px");
    d.style.setProperty("left", "50px");
    d.style.setProperty("width", "50px");
    d.style.setProperty("height", "50px");
    d.style.setProperty("background", "blue");
    d.style.setProperty("z-index", 2);
    // 关键修改：将div添加到container而非canvas内部
    document.getElementById("container").appendChild(d);
    resolve();
  });
}

const a = () => {
  return new Promise((resolve, reject) => {
    const ca = document.createElement("canvas");
    ca.setAttribute("id", "canvas");
    ca.style.setProperty("position", "relative");
    ca.style.setProperty("z-index", 1);
    ca.width = 150;
    ca.height = 150;
    const co = ca.getContext("2d");
    co.fillStyle = "red";
    co.fillRect(0, 0, 150, 150);
    document.getElementById("container").appendChild(ca);
    resolve();
  });
}

<main>
  <div id="container"></div>
</main>

关键说明 #

1. 调整DOM层级：让div和canvas成为同级元素，都挂载到container容器下
2. 定位逻辑：canvas设置position: relative，作为绝对定位div的参考容器，确保div的top/left是相对于canvas的位置
3. z-index生效条件：只有当元素的position属性为relative/absolute/fixed时，z-index才会生效，你的代码里这点已经做对了

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