如何让Canvas始终置于contenteditable div上方并实现模式切换？

我完全懂你的痛点——既要让Canvas一直显示在编辑区域上方，又要在切换到编辑模式时能正常输入，单纯反转zIndex确实没法同时满足这两个要求。其实你之前尝试的pointer-events思路是对的，只是可能没搭配正确的默认层级和状态切换逻辑，咱们来调整一下：

核心思路 #

让Canvas始终保持更高的zIndex（视觉上一直在上方），然后通过pointer-events属性控制哪个元素接收用户交互：

• 绘图模式：Canvas允许接收鼠标/触摸事件，编辑区域禁用事件（点击会被Canvas拦截）
• 编辑模式：Canvas禁用事件（点击会穿透到下方的编辑区域），编辑区域允许接收输入

具体实现步骤 #

1. 先在CSS里设置好默认的层级和初始状态（假设默认是绘图模式）：

/* 确保两个元素是重叠定位，比如绝对定位 */
#toolCanvas, #textBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#toolCanvas {
  z-index: 2; /* 固定在上方 */
  pointer-events: auto; /* 默认允许绘图交互 */
}

#textBox {
  z-index: 1; /* 在Canvas下方 */
  pointer-events: none; /* 默认禁用编辑交互 */
}

2. 修改切换函数，只控制pointer-events状态：

function switchDrawingText(){
  const tempTextBox = document.getElementById("textBox");
  const tempCanvas = document.getElementById("toolCanvas");
  
  // 判断当前模式（通过Canvas的pointer-events状态）
  const isInDrawingMode = tempCanvas.style.pointerEvents !== 'none';
  
  if (isInDrawingMode) {
    // 切换到编辑模式：Canvas不接收事件，编辑区域可交互
    tempCanvas.style.pointerEvents = 'none';
    tempTextBox.style.pointerEvents = 'auto';
    // 可以给切换按钮更新文字，比如改成"切换到绘图模式"
  } else {
    // 切换到绘图模式：Canvas可交互，编辑区域禁用
    tempCanvas.style.pointerEvents = 'auto';
    tempTextBox.style.pointerEvents = 'none';
    // 按钮文字改成"切换到编辑模式"
  }
}

为什么之前的pointer-events没生效？ #

大概率是因为你没有固定Canvas的zIndex始终高于编辑区域，或者pointer-events的设置被其他CSS规则覆盖了。现在这个方案里，zIndex是固定不变的，只通过事件穿透来控制交互，完美解决了“视觉层级”和“交互需求”的矛盾。

进阶优化：用CSS类管理状态（更易维护） #

如果后续要加更多样式状态，推荐用类来切换，代码更清晰：

/* 父容器的模式类 */
.drawing-mode #toolCanvas {
  pointer-events: auto;
}
.drawing-mode #textBox {
  pointer-events: none;
}

.edit-mode #toolCanvas {
  pointer-events: none;
}
.edit-mode #textBox {
  pointer-events: auto;
}

/* 基础定位样式不变 */
#toolCanvas, #textBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#toolCanvas { z-index: 2; }
#textBox { z-index: 1; }

然后切换函数简化为：

function switchDrawingText(){
  const container = document.getElementById('editor-container'); // 两个元素的父容器
  container.classList.toggle('drawing-mode');
  container.classList.toggle('edit-mode');
}

这样后续调整样式逻辑时，只需要修改CSS类，不用动JS代码，扩展性更好。

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