<canvas>元素后< img>无法显示，需实现叠加显示的技术求助

问题根源是默认流式布局下，canvas与img会按顺序占据空间，canvas可能遮挡后方的img。要实现叠加显示，需通过CSS定位调整元素布局与层级：

步骤1：设置容器的定位上下文 #

给包裹canvas和img的#minimap容器添加相对定位，为内部元素提供定位基准：

#minimap {
  position: relative;
  /* 设置与canvas一致的宽高，确保容器能包裹元素 */
  width: 200px; /* 替换为你的canvas实际宽度 */
  height: 200px; /* 替换为你的canvas实际高度 */
}

步骤2：定位canvas和img元素 #

给canvas和img设置绝对定位，让它们脱离文档流并重叠，同时用z-index控制层级：

#minimap-main {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 让canvas处于下层 */
}

#minimap-char {
  position: absolute;
  top: 0; /* 可根据需求调整图片位置 */
  left: 0;
  z-index: 2; /* 让img处于canvas上层，确保正常显示 */
}

效果说明 #

保持原有HTML结构（canvas在前、img在后），结合上述CSS后，两个元素会重叠在#minimap容器内，img将显示在canvas上方，且不会出现无法显示的问题。你可以调整top和left属性来控制图片在小地图上的具体位置。

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