获取元素相对于其父元素的距离答案

【问题标题】：Get distance of element relative to its parent element获取元素相对于其父元素的距离
【发布时间】：2018-02-15 01:07:48
【问题描述】：

我想知道如何获取元素相对于其父元素的距离/偏移量/位置。

与 jQuery 的 position() 功能不同，它获取相对于父级 offset 位置的位置，我需要获取（假设）元素的 stable 位置，因为它是与包含/父元素顶部的距离。

示例：

<div id="parent">
  <div id="pos1">Has a position of 0px from top of containing parent el.</div>
  <br style="height:20px;">
  <br style="height:20px;">
  <div id="pos2">Has a position of 40px from top of containing parent el.</div>
</div>

因此，无论父元素在文档中的位置如何，pos1 和 pos2 的位置都会报告相同，因为它们相对于其父元素不会发生变化...

这可能吗？

【问题讨论】：

标签： jquery

【解决方案1】：

应该这样做：

$('#pos1').offset().top - $('#pos1').parent().offset().top - $('#pos1').parent().scrollTop()

【讨论】：

作品；但是我的原始代码库发生了一些奇怪的事情：子偏移量总是根据父元素的滚动位置而变化（它具有固定的高度，小于子元素的组合高度）。
@VictorS 我明白了，请尝试将 offset() 方法更改为 position() 方法
没错！这就是我问这个问题的原因，因为.position() 也会根据它在滚动的父元素中的位置来改变它对子元素的值！见鬼！
@VictorS 我更新了我的答案。有两种选择供您尝试。

【解决方案2】：

此代码对我有用。

var child_top = $("#parent_div").scrollTop() + $("#child_div").offset().top

【讨论】：

【解决方案3】：

Parent.offset() - child.offset() ?

使用jQuery offset()

【讨论】：

如果孩子在父母之后（垂直定位），那么它将是 Child.offset() - Parent.offset() 对吗？
是的，你是对的，只是考虑将两者都相对于文档。