Question

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

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

如何在vanilla Javascript或JQuery中获取Element最近的祖先？

offsetParent（）怎么样？ https://api.jquery.com/offsetParent/

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

Answer 1

你可以测试父母的位置是否是静态的，如果不是你继续，直到你到达位置不同于静态的第一祖先。

以下是您可以调整的简化代码：

$('.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>

Answer 2

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

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

另一方面，如果你在考虑X和Y时需要全距离，你可以使用这里描述的方法

Measure distance between two HTML elements' centers

获取元素的最近位置祖先

2 个答案: