Question

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).

Answer 1

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.