如何获取动态子元素相对父元素的偏移量

解答思路

让父元素成为“定位上下文”，子元素基于该上下文进行绝对定位，从而可以直接通过 left/top 或 offsetLeft/offsetTop 获得偏移量。

示例代码

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 0;
  top: 0;
}

const offsetLeft = child.offsetLeft;
const offsetTop = child.offsetTop;

详细说明

• 父元素设置 position: relative，会创建一个新的定位上下文（但不脱离文档流）。
• 子元素设置 position: absolute 后，left/top 就是相对于最近的已定位（position 非 static）祖先元素计算的，也就是这里的父元素。
• 即便子元素本身不需要绝对定位展示，只要父元素是定位元素，offsetLeft/offsetTop 依然是相对父元素的偏移量，可以直接读取使用。

小结

给父元素加 relative，是获取动态子元素相对父元素偏移量最简单直接的方式。