获取元素的最近定位祖先

Question

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

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

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

---

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>