CODEWITHSUNDEEP
javascriptjquerypositioningoffset
Jacob
Jacob

Reputation: 78850

offsetParent() in jQuery not returning expected relative-positioned ancestor

I have some 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 located inside the "offset parent" of the element targeted by the widget. To do so, I essentially have code like this:

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

Unfortunately, the element appears to be inserted as a child of .grand-parent instead of parent. My understanding of offsetParent() (and the documentation seems to back this) is that offsetParent() should return .parent because it is positioned relative. Is my understanding of offsetParent incorrect, or is there a problem with jQuery (I'm using 1.4.1).

Upvotes: 4

Views: 3000

Answers (1)

Jacob
Jacob

Reputation: 78850

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

Upvotes: 6

Related Questions