如何使用CSS top/left属性将元素精确定位到图片指定像素位置

你之前猜测的单个像素对应百分比变化幅度过小并不是问题诱因，核心原因是标记圆点本身拦截了鼠标点击事件。
你的圆点使用position: absolute定位在图片上层，当点击位置落在圆点的9px覆盖范围内时，点击事件的触发目标是圆点元素，而非你绑定了点击监听的图片/图片容器：要么点击回调根本没有触发，要么回调里拿到的坐标偏移是相对于圆点而非图片容器的，最终表现为圆点不跟随点击移动；只有点击圆点外侧区域时，事件正确触发在图片容器上，位置更新才会正常执行。

1. 让圆点穿透鼠标事件，从根源避免拦截 #

给你的.hObiiS样式添加pointer-events: none属性，该属性会让元素完全不响应鼠标交互，所有点击、hover事件都会直接穿透元素落到下层的图片上，无论点击位置是否在圆点范围内，都能正常触发图片的点击监听。
修正后的完整样式代码：

.hObiiS{
  border: solid 1px #303030 !important; 
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: none !important; 
  height: 9px !important; 
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  width: 9px !important; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* 新增：禁止响应鼠标事件，穿透点击 */
}
.hObiiS::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 1px; 
    background-color: rgb(224, 1, 1);
    border-radius: 50%;
}

对应的圆点元素不需要修改结构，保留原有写法即可：

<div class="hObiiS" style="top: 25.4601%; left: 58.6382%;"></div>

2. 优化位置计算逻辑，保证逐像素精度 #

不要使用粗粒度的百分比换算，点击时直接基于图片容器的实际渲染尺寸计算偏移，百分比值保留4位小数即可实现全尺寸下的逐像素定位（哪怕是8K分辨率的图片，换算误差也小于0.1像素，人眼完全无法感知）。
参考点击监听实现代码：

// 替换为你的图片容器选择器
const imageContainer = document.querySelector('.image-wrap');
const markerDot = document.querySelector('.hObiiS');

imageContainer.addEventListener('click', (e) => {
  // 获取图片容器当前的视口位置信息
  const containerRect = imageContainer.getBoundingClientRect();
  // 计算点击位置相对于容器左上角的像素偏移
  const posX = e.clientX - containerRect.left;
  const posY = e.clientY - containerRect.top;
  // 换算为百分比，保留4位小数保证精度
  const leftVal = `${(posX / containerRect.width * 100).toFixed(4)}%`;
  const topVal = `${(posY / containerRect.height * 100).toFixed(4)}%`;
  // 更新圆点位置
  markerDot.style.left = leftVal;
  markerDot.style.top = topVal;
});

3. 可选校验项 #

• 不需要给圆点设置过高的z-index，只要保证它在图片上层即可，避免意外遮挡其他交互元素
• 如果你的图片是响应式缩放的，不需要额外监听resize事件，百分比定位会自动适配容器尺寸变化

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