jQuery .offsetParent() Method

What Is .offsetParent()?

.offsetParent() (since jQuery 1.2.6) returns the closest positioned ancestor of each matched element. It takes no arguments. Official docs note this is useful for calculating offsets, animations, and placing objects on the page.

$("li.item-a").offsetParent();     // official: positioned "II"
$("#box").offsetParent();          // nearest relative/absolute/fixed
$(".child").offsetParent().css(…); // style the positioning context

// parent()        → immediate parent (any position)
// closest(sel)    → nearest match to your selector
// offsetParent()  → nearest positioned ancestor

How to Use .offsetParent()

Start from a child, walk up until a positioned ancestor appears.

1. Select the element whose positioning context you need.
2. Call .offsetParent() — no arguments.
3. Static ancestors are skipped; relative / absolute / fixed stop the walk.
4. If none exist, browsers typically return html or body.
5. Use the result with .offset() / .position() for layout math.

Pseudocode

call $(starts).offsetParent()

result = empty set
for each start in the matched set:
    ancestor = start.parentElement
    while ancestor is not null:
        if ancestor.position is relative
           or absolute
           or fixed:
            add ancestor to result
            break
        ancestor = ancestor.parentElement
    // if none found → document root (html/body)

return result as a new jQuery object

Cheat Sheet

Keep ancestor methods side by side.

Live Preview

From li.item-a, compare .offsetParent(), .parent(), and .closest("li").

Ready — choose a call and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("li.item-ii").css("position", "relative");
$("li.item-a").offsetParent().append(" [op]");

II [op]
(item A’s offset parent is the positioned II)

$("#box").css("position", "relative");

var p = $("#child").parent()[0].id;
var op = $("#child").offsetParent()[0].id;

$("#out").text("parent=" + p + " · offsetParent=" + op);

parent=wrap · offsetParent=box
wrap is static; box is relative

$("li.item-ii").css("position", "relative");

var c = $("li.item-a").closest("li").hasClass("item-a");
var op = $("li.item-a").offsetParent().hasClass("item-ii");

$("#out").text(
  "closest is item-a? " + c +
  " · offsetParent is item-ii? " + op
);

closest is item-a? true · offsetParent is item-ii? true
closest includes self; offsetParent walks up

$("#stage").css("position", "relative");
$("#pin").css("position", "absolute");

$("#out").text(
  "offsetParent id: " + $("#pin").offsetParent().attr("id")
);

offsetParent id: stage
Absolute #pin is positioned against #stage

var tag = $("#lonely").offsetParent().prop("tagName");

$("#out").text("offsetParent tag: " + tag);

offsetParent tag: BODY
(or HTML — depends on the browser)

Performance Notes

Cost grows with how deep the walk is. Prefer an explicit positioned wrapper near the element when you call this often (for example in animation loops).

Key Takeaways