OffsetParent () in jQuery does not return the expected relative positional ancestor

Question

I have HTML with the following approximate structure and positioning:

<div class="grand-parent" style="position: absolute"> <div class="parent" style="position: relative"> <div class="child"></div> </div> </div> 

In my jQuery widget, I'm trying to insert an element that is inside the "offset parent" of the element aimed at the widget. For this, I have this code:

 var targetElement = $('.child'); $('<div/>').appendTo(targetElement.offsetParent()); 

Unfortunately, the element is represented as a child of .grand-parent instead of parent . My understanding of offsetParent() (and the documentation seems to confirm this) is that offsetParent() should return .parent because it is relative. Is my understanding of offsetParent wrong, or is there a problem with jQuery (I am using 1.4.1).

Answer 1

According to https://developer.mozilla.org/en/DOM/element.offsetParent , offsetParent does not work as I expected if the parent is not displayed ( display: none ). In my case, the container element is simple.