getBoundingClientRect返回元素相对于视口左上角的坐标，非文档顶部；其top值不等于offsetTop，因后者相对最近定位祖先，且滚动、transform、iframe等均使其关系变化。
返回的是相对于**视口（viewport）左上角**的坐标，不是页面顶部或文档根节点——这是绝大多数偏移计算出错的根源。
为什么
的
值不等于
因为
是相对于**最近的定位祖先元素**（或 body），而
是相对于当前可视区域顶部。滚动、缩放、iframe、CSS transform 都会彻底改变二者关系。
页面滚动后，
会变小甚至为负；
不变
父元素加了
，
无视它，但
会把这 10px 算进去
在 iframe 中调用，返回值仍基于该 iframe 的视口，不是顶层窗口
如何得到元素相对于整个文档顶部的真实 Y 偏移
需要手动把滚动距离加回去：真实文档 Y 坐标 =
+
（或
）。
兼容旧版 Safari？用
注意：如果页面有横向滚动条且被隐藏（
），
仍有效，但
同理需同步处理 X 方向
不要直接用
—— 在标准模式下它恒为 0，必须优先读
示例：
遇到 fixed 定位或 CSS 缩放时怎么校正
本身已包含 fixed 元素的视口定位结果，无需额外处理；但缩放（
或
）会导致返回值失真——它反映的是“渲染后像素位置”，而非 CSS 逻辑尺寸。
若需逻辑坐标（比如和 CSS width/height 对齐），得除以当前缩放系数：
不可靠，应改用
解析 scale 值
fixed 元素在滚动时
几乎不变，但
会随滚动微调（因视口内位置变化），这点常被误认为 bug
避免在
或
高频回调里反复调用——它触发同步布局计算，性能敏感场景建议节流或缓存结果
真正麻烦的不是 API 本身，而是你默认它“应该等于 offsetTop”——只要记住它只承诺：此刻，这个矩形在你眼睛看到的屏幕区域里的左上角在哪。
getBoundingClientRectgetBoundingClientRecttopoffsetTopoffsetTopgetBoundingClientRect().topgetBoundingClientRect().topoffsetToptransform: translate(0, 10px)offsetTopgetBoundingClientRect()getBoundingClientRect().topwindow.scrollYwindow.pageYOffsetwindow.pageYOffset || document.documentElement.scrollTop || document.body.scrollTopoverflow: hiddenscrollYscrollXdocument.body.scrollTopdocument.documentElement.scrollTopconst rect = element.getBoundingClientRect();
const docTop = rect.top + window.pageYOffset;
const docLeft = rect.left + window.pageXOffset;getBoundingClientRectzoomtransform: scale()rect.width / window.devicePixelRatiogetComputedStyle(element).transformtopgetBoundingClientRect().topresizescroll