Code has been added to clipboard!

Use jQuery .offsetParent() to Find the Closest Positioned Parent

Reading time 1 min
Published Jan 22, 2018
Updated Jan 21, 2020

jQuery offsetParent: Main Tips

  • jQuery .offsetParent() returns the first positioned parent.
  • Positioned refers to an element that has the CSS position property with one of the following values: relative, absolute or fixed.

Using .offsetParent()

The .offsetParent() jQuery method looks through the DOM tree of specified elements and finds the ancestors. Then the offset parents function generates a new jQuery object with the closest positioned parent.

Hover over the element in the example to see its positioned offset parent change color:

Example
$("div").hover(() => {
    $("div").offsetParent().css("color", "#41914e");
});

Follow this syntax for the jQuery .offsetParent() method:

$(selector).offsetParent();

Tip: you can return the element position relative to the offset parent by applying the jQuery .position() method.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 21/01/2021
3176 People Used
Only 97 Left
Rating
5.0