Canvas层级叠加异常：z-index无法实现画布前后堆叠切换

嘿，我完全懂你现在的困扰——查了好几篇关于Canvas层级的帖子，结果想实现两个Canvas前后叠放、点击切换顺序的效果，却变成了上下排列，这确实挺让人头疼的！

问题根源 #

其实核心问题在于Canvas默认是块级元素，会自动占据整行空间，所以两个Canvas默认会上下排列。而z-index属性只对设置了position: relative/absolute/fixed的元素生效，没定位的话，z-index根本起不了作用。

具体解决步骤 #

1. 用CSS让两个Canvas重叠

给两个Canvas设置绝对定位，让它们的位置完全重合：

canvas {
  /* 关键：设置定位，让z-index生效 */
  position: absolute;
  top: 0;
  left: 0;
  /* 可选：加个边框方便看效果 */
  border: 1px solid #333;
}

/* 初始层级设置 */
#canvas1 {
  background-color: skyblue;
  z-index: 1;
}

#canvas2 {
  background-color: salmon;
  z-index: 2;
}

如果你的Canvas需要放在某个容器内，记得给容器加上position: relative，这样Canvas的绝对定位会相对于容器，而不是整个页面。

2. 点击切换层级的JS逻辑

给两个Canvas绑定点击事件，交换它们的z-index值即可：

const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');

// 切换层级的函数
function toggleLayers() {
  // 临时存储其中一个的z-index
  const tempZ = canvas1.style.zIndex;
  // 交换两个画布的层级
  canvas1.style.zIndex = canvas2.style.zIndex || 2;
  canvas2.style.zIndex = tempZ || 1;
}

// 给两个画布都绑定点击事件
canvas1.addEventListener('click', toggleLayers);
canvas2.addEventListener('click', toggleLayers);

完整HTML示例

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #333;
    }
    #canvas1 {
      background: skyblue;
      z-index: 1;
    }
    #canvas2 {
      background: salmon;
      z-index: 2;
    }
  </style>
</head>
<body>
  <canvas id="canvas1" width="400" height="300"></canvas>
  <canvas id="canvas2" width="400" height="300"></canvas>

  <script>
    const canvas1 = document.getElementById('canvas1');
    const canvas2 = document.getElementById('canvas2');

    function toggleLayers() {
      const tempZ = canvas1.style.zIndex;
      canvas1.style.zIndex = canvas2.style.zIndex || 2;
      canvas2.style.zIndex = tempZ || 1;
    }

    canvas1.addEventListener('click', toggleLayers);
    canvas2.addEventListener('click', toggleLayers);
  </script>
</body>
</html>

这样操作后，两个Canvas就会完全重叠在一起，点击任意一个画布就能切换它们的前后堆叠顺序，再也不会出现上下排列的问题啦！

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