获取元素的最近定位祖先

Question

根据https://www.w3schools.com/css/css_positioning.asp，

带有position: absolute; 的元素相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。

如何在原生 Javascript 或 JQuery 中获取元素的最近定位祖先？

---

offsetParent() 呢？ https://api.jquery.com/offsetParent/

说明： 获取定位的最近的祖先元素。

Answer 1

编辑：我假设您正在寻找两个元素之间的距离。 @TemaniAfif 有正确的答案

---

您可以使用parentNode 导航祖先树并将每个元素的offsetTop 与手头元素的offsetTop 进行比较。如果您只对 Y 距离感兴趣。

另一方面，如果您在考虑 X 和 Y 时需要完整距离，则可以使用此处描述的方法

Measure distance between two HTML elements' centers

Answer 2

您可以测试位置是否是父级的静态，如果不是，则继续直到到达位置与静态不同的第一个祖先。

这是一个您可以调整的简化代码：

$('.box').each(function() {
  var p = $(this).parent();
  while (p && p.css('position') === 'static') {
    p = p.parent();
  }
  console.log(p.attr('class'));
})

.box {
  position: absolute;
}

.f2 {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f1">
  <div class="f2">
    <div class="f3">
      <div class="box"> <!-- This one relative to f2 -->
        <div class="box"> <!-- This one relative to box -->
        </div>
      </div>
    </div>
  </div>
</div>
<div class="f1">
  <div class="f2">
    <div class="f3" style="position:absolute;">
      <div class="box"> <!-- This one relative to f3 -->
      </div>
    </div>
  </div>
</div>