offsetTop用法详解

聊到offsetTop，很多前端同学可能第一反应就是“元素到父元素顶部的距离”。这没错，但实际用起来，有几个细节如果不注意，很容易踩坑。咱们今天就把这个东西彻底说透。

先说最核心的定义：offsetTop 指的是当前元素上边框外缘到它的offsetParent上边框内缘的距离。注意，这里的关键不是“父元素”，而是“offsetParent”。

那 offsetParent 又是谁？简单说，就是距离当前元素最近的一个具有定位属性的祖先元素（position 为 relative、absolute 或 fixed）。如果往上找一圈，所有祖先都没有设置定位，那 offsetParent 就退化为 body。举个例子：

• 图1中，child 的父级 father 设置了 position: relative，那么 offsetParent 就是 father，此时 offsetTop 测量的是 child 到 father 顶部的距离。
• 图2中，所有祖先都没有定位，offsetParent 直接指向 body，offsetTop 就成了 child 到 body 顶部的距离。

到这里，基本概念应该清楚了。但还有一个非常容易忽视的坑：只有元素完成渲染（display 不为 none，且不在隐藏状态）时，offsetTop 的值才是准确的。如果你的页面里某个元素的数据需要异步加载，比如图片加载完成或接口返回后才显示，此时获取 offsetTop 可能会偏小——因为还没渲染完，浏览器还没计算最终布局。所以，务必在渲染完成后再读取这个值，比如放在请求回调里，或者用 requestAnimationFrame 确保布局稳定。

一句话总结：搞懂 offsetParent 是谁，再等渲染完成再取值，offsetTop 才能给你正确的结果。