jQuery offset()、position()、offsetTop 和 getBoundingClientRect() 都返回错误的顶部值答案

【问题标题】：jQuery offset(), position(), offsetTop and getBoundingClientRect() all returning wrong top valuesjQuery offset()、position()、offsetTop 和 getBoundingClientRect() 都返回错误的顶部值
【发布时间】：2022-11-11 23:04:01
【问题描述】：

如果对此有更简单的答案，我深表歉意。我一直在 Stack Overflow 上，可能会因为这个问题而大发雷霆。

我正在使用静态站点生成器来动态生成 API 文档。在一页上，我有一个 2 列布局，并且希望将右列的内容与左列对齐。因为生成器会为每个页面动态生成内容，所以我需要避免在 top: 30px 等样式值中进行硬编码。

目前 jQuery 的 offset()、position()、offsetTop 和 vanilla JS getBoundingClientRect() 都返回错误的顶部位置值。

我参考了 jQuery 文档 here，其中指出 offset() 不包括边距。然而，在测试中，我发现即使没有声明边距，我仍然没有从 offset()、position() 或 vanilla JS getBoundingClientRect() 返回正确的 top 值。

请参阅下面的 JS Fiddle，了解我所看到的简单示例。很明显，我遗漏了一些明显的东西，尽管阅读了许多其他 offset() Stack 帖子，但我似乎仍然无法理解它。

在我的 JsFiddle 示例中，我们有一个简单的 2 列设置。我想在左栏中将h2 放置在与右栏中h2 相同的页面高度。

小提琴中的示例 JS 获取目标元素的最高值并分配给目标元素：

let targetElement = document.getElementById('target-element');
let position = Math.round($(targetElement).position().top).toString() + 'px';
let destinationElement = document.getElementById('destination-element');

destinationElement.style.top = position;

如果有人有时间帮我解决这个问题，我将非常感激

JS Fiddle

【问题讨论】：

如果我将position: absolute 用于您的#destination-element，它确实有效......
我是个白痴。太感谢了！如果您想回复为答案，很高兴将其标记为已解决

标签： javascript jquery position offset

【解决方案1】：

如果您为您的#destination-element 定义position: absolute 而不是relative 它确实有效...

【讨论】：