javascript - 获取元素的最近定位祖先

Question

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

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

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

---

offsetParent() 怎么样？ https://api.jquery.com/offsetParent/

Description: Get the closest ancestor element that is positioned.

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>