如何设置元素相对于Bootstrap Modal的offset偏移？

解决方法 #

你使用的jQuery offset() 方法本身的定位基准是整个HTML文档，这是偏移不符合预期的核心原因。你已经为.bbox的直接父容器#limit设置了position: relative，只需将定位逻辑调整为基于该父容器计算相对坐标，再通过CSS的top、left属性赋值即可。

修改后的JS代码：

// 获取父容器#limit的全局偏移量
const parentOffset = $('#limit').offset()
// 将全局坐标转换为相对于父容器的相对坐标
const x_L = x - w_L / 2 - parentOffset.left
const y_L = y - h_L / 2 - parentOffset.top

$('#eye_1').height(h_L).width(w_L)
// 通过修改CSS属性完成相对定位
$('#eye_1').css({
  top: `${y_L.toFixed(2)}px`,
  left: `${x_L.toFixed(2)}px`
})

第二个标注框#eye_2的修改逻辑完全一致，复用上述计算规则替换对应选择器即可。

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