javascript - Getting the nearest positioned ancestor of an Element - Stack Overflow

admin管理员组

文章数量:1288008

According to .asp,

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

How can I get the nearest positioned ancestor of an Element, in either vanilla Javascript or JQuery?

---

What about offsetParent()? /

Description: Get the closest ancestor element that is positioned.

According to https://www.w3schools./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).

How can I get the nearest positioned ancestor of an Element, in either vanilla Javascript or JQuery?

---

What about offsetParent()? https://api.jquery./offsetParent/

Description: Get the closest ancestor element that is positioned.

• javascript
• jquery
• css

Share Improve this question Follow edited Feb 22, 2018 at 10:00 Lokomotywa asked Feb 22, 2018 at 9:38 LokomotywaLokomotywa 2,8441111 gold badges4848 silver badges8080 bronze badges 3

• 1 Are you saying that you want to find the closest parent element in the DOM tree that has a position of anything other than static? Also, please don't use W3Schools as a reference. Their articles are often outdated and sometimes just plain wrong. MDN is far more prehensive and accurate. – Rory McCrossan Commented Feb 22, 2018 at 9:47
• I am saying that I want to get the element an 'element with position: absolute' is relative positioned to. – Lokomotywa Commented Feb 22, 2018 at 9:49
• In that case @TemaniAfif just answered with the solution :) – Rory McCrossan Commented Feb 22, 2018 at 9:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

You can test if the position is static of the parent, if not you continue until your reach the first ancestor with position different from static.

Here is a simplified code that you can adjust:

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

The vanilla JavaScript solution: use HTMLElement property offsetParent

document.querySelector('#myElementID').offsetParent 

Note: There are some special cases, where offsetParent is null. More details in the linked documentation.

Edit : I was assuming you were looking for distance bewteen two elements. @TemaniAfif has the right answer

---

You could navigate the tree of ancestors using parentNode and pare the offsetTop of each to the offsetTop of the element at hand. if all you are interested in is the Y distance.

On the other hand if you need the full distance while accounting for X and Y, you could use the method described here

Measure distance between two HTML elements' centers

本文标签： javascriptGetting the nearest positioned ancestor of an ElementStack Overflow