如何在表格单元格内实现点击图片后叠加图片并正确定位？

先修正原代码的基础错误 #

• HTML里的scr是拼写错误，应该改为src
• onclick="addImage"里的函数名和JS定义的showMoves不匹配，要统一名称
• 点击事件绑定对象错误：要实现点击雪人图片触发操作，需把onclick绑定到<img>标签，而非<a>标签

核心解决定位偏移问题 #

绝对定位元素默认会相对于最近的非static定位祖先元素定位，所以需要给图片的父容器（比如<td>）设置position: relative，让新添加的绝对定位图片以这个容器为基准。再设置top: 0; left: 0，就能让圆形图片完全覆盖在雪人图片上方。

修改后的完整代码 #

HTML部分

<table>
  <tr>
    <td style="background-color:Gray; position: relative;">
      <img src="snowman.png" onclick="showMoves()">
    </td>
  </tr>
</table>

JavaScript部分

function showMoves() {
  // 避免重复添加圆形图片
  const existingCircle = document.querySelector('td img:last-child');
  if (existingCircle && existingCircle.src.includes('circle.png')) return;

  const image = document.createElement("img");
  const imageParent = document.querySelector('td');

  image.src = "circle.png";
  image.style.position = "absolute";
  image.style.top = "0";
  image.style.left = "0";
  // 确保圆形图片在最上层
  image.style.zIndex = "10";

  imageParent.appendChild(image);
}

其他标记表格单元格的方法 #

• 直接给<td>设置唯一id，比如<td id="snowmanCell" style="background-color:Gray;">，后续通过document.getElementById('snowmanCell')获取
• 用data-*属性标记，比如<td data-type="snowman" style="background-color:Gray;">，后续通过document.querySelector('[data-type="snowman"]')获取

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