获取一个元素的最近定位祖先元素

Question

根据https://www.w3schools.com/css/css_positioning.asp，具有position: absolute;的元素相对于最近的已定位祖先进行定位（而不是像fixed一样相对于视口进行定位）。

如何在vanilla Javascript或JQuery中获取一个元素的最近已定位祖先？

---

关于 offsetParent() 方法？https://api.jquery.com/offsetParent/

描述：获取最近的已定位祖先元素。

- Lokomotywa

---

你是想找到DOM树中最接近的父元素，其position属性不为static吗？另外，请不要使用W3Schools作为参考。他们的文章经常过时，有时甚至是错误的。MDN更加全面和准确。 - Rory McCrossan

我想要获取一个“position属性为absolute”的元素相对于哪个元素定位。 - Lokomotywa

在这种情况下，@TemaniAfif刚刚给出了解决方案 :) - Rory McCrossan

Answer 1

你可以测试父元素的定位是否为static，如果不是，则继续查找直到找到第一个具有不同于static的定位属性的祖先元素。

以下是一段简化的代码，你可以进行调整：

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

- Temani Afif

---

我建议添加一个条件，以防循环到达“document”（在“html”元素上方）并且位置检查出错，因此基本上是 while (p && p.parent()[0].nodeType === 1 && p.css('position') === 'static') 或 while (p && p.parent().prop('nodeType') === 1 && p.css('position') === 'static')。 - Max Starkenburg

Answer 2

编辑：我以为你是在寻找两个元素之间的距离。@TemaniAfif 给出了正确的答案。

---

你可以使用parentNode浏览祖先树，并将每个祖先的offsetTop与手头元素的offsetTop进行比较，以获取Y距离。另一方面，如果你需要计算X和Y并获取完整距离，可以使用此处描述的方法。在两个HTML元素中心之间测量距离。

- Abderrahmane TAHRI JOUTI

---

这是关于以像素为单位测量文字距离，而问题提出者似乎只想获取管理绝对定位元素位置的父元素的引用 - “如何获取元素的最近定位祖先”。 - Rory McCrossan

Answer 3

纯JavaScript解决方案：使用HTMLElement属性offsetParent。

document.querySelector('#myElementID').offsetParent 

注意：有一些特殊情况下，offsetParent 为 null。更多详细信息请参阅链接的文档。

- TLindig