如何实现标记图片固定在相对定位图片指定位置且不随图尺寸偏移？

当然可以实现这个需求，不过你当前的代码存在两个核心问题：

• 标记图的position: absolute是相对于<body>定位的，而非底图
• 使用固定像素值top/left，底图缩放时标记的相对位置会偏移

修改思路 #

1. 用容器包裹底图和标记：给两者套一个position: relative的容器，让标记的绝对定位参考这个容器（也就是底图的范围）
2. 改用百分比定位：用百分比设置标记的top/left，这样底图缩放时，标记会按比例保持相对位置
3. 可选：中心对齐修正：如果需要标记的中心对准目标位置，用transform: translate(-50%, -50%)调整

修改后的代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* 相对定位的容器，作为标记的定位参考 */
    .img-container {
      position: relative;
      width: 50%; /* 底图的显示宽度，可随意调整 */
    }
    
    /* 底图占满容器，高度自适应 */
    .base-img {
      width: 100%;
      height: auto;
      display: block; /* 消除图片默认的行内元素间隙 */
    }
    
    /* 标记图相对于容器绝对定位 */
    .marker {
      position: absolute;
      /* 按原底图尺寸计算百分比：原底图800x500，目标位置(100,100) */
      top: 20%; /* 100/500*100% */
      left: 12.5%; /* 100/800*100% */
      width: 50px;
      /* 让标记中心对准目标点（可选，按需开启） */
      /* transform: translate(-50%, -50%); */
    }
  </style>
</head>
<body>
  <div class="img-container">
    <img class="base-img" src="https://picsum.photos/800/500" />
    <img class="marker" src="https://i.sstatic.net/JpinP4M2.png" />
  </div>
</body>
</html>

关键细节说明 #

• 容器的宽度决定了底图的显示尺寸，调整这个值时，标记会自动保持在底图的相对位置
• 百分比的计算方式：目标像素值 / 原底图对应维度的像素值 * 100%，确保缩放后位置完全匹配
• 如果不需要中心对齐，去掉transform即可，此时标记的左上角会对准目标位置

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