getBoundingClientRect()最直接获取元素相对视口的位置，返回含left、top等六属性的DOMRect对象；需结合scrollX/Y得文档绝对位置；注意滚动容器偏差及性能影响。
用 getBoundingClientRect() 方法最直接、最常用，它返回元素相对于视口（viewport）的坐标和尺寸信息。
获取相对视口的位置（推荐）
element.getBoundingClientRect() 返回一个 DOMRect 对象，包含 left、top、right、bottom、width、height 六个属性。所有值都是以像素为单位的数字，且 top 和 left 是元素上边和左边到视口左上角的距离。
- 适用于判断元素是否在可视区域内、实现吸顶、弹窗定位等场景
- 注意：该值会随滚动、缩放、页面重排而动态变化，如需固定值需手动缓存
- 示例：const rect = elem.getBoundingClientRect(); console.log(rect.top);
获取相对文档的位置（含滚动偏移）
若需要元素距离整个页面顶部/左侧的绝对位置（即包含页面已滚动的距离），可结合 getBoundingClientRect() 与 window.scrollX / window.scrollY 计算：
absoluteLeft = rect.left + window.scrollXabsoluteTop = rect.top + window.scrollY- 也可用
elem.offsetLeft和elem.offsetTop，但它们只计算相对于最近的 定位祖先（position为relative、absolute或fixed的祖先），不是文档起点，容易出错，不建议用于全局定位
注意滚动容器中的定位偏差
如果元素位于某个设置了 overflow: scroll 或 auto 的容器内（非 body），getBoundingClientRect() 仍返回相对于视口的值，而非该容器。此时需逐级减去滚动容器的滚动偏移：
- 遍历元素的父级，检查是否有
scrollLeft/scrollTop - 或改用
elem.getClientRects()（多段文本框时有用）配合手动累加 - 更稳妥的做法：对目标滚动容器调用
getBoundingClientRect()，再做差值计算
兼容性与性能小提醒
getBoundingClientRect() 在所有现代浏览器及 IE6+ 中都支持，无兼容问题。
- 它是读取操作，但会触发同步布局计算（reflow），频繁调用（如在
scroll事件中）可能影响性能 - 建议节流（throttle）或使用
IntersectionObserver替代部分场景 - 如只需宽高，可优先读取
offsetWidth/offsetHeight，它们不触发 reflow
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
