4

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

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
Jacob
  • 77,566
  • 24
  • 149
  • 228
  • I noticed you are appending to "this.element.offsetParent()". What is this in relation to targetElement? Your usage of offsetParent and appendTo seem valid, so maybe the problem is with your usage of "this" or a problem with the code before you simplified it? – Mayo Mar 18 '11 at 21:32
  • What's the context of "this" in `this.element.offsetParent()`? – lsuarez Mar 18 '11 at 21:33
  • Oops... corrected. Sorry. Should be `targetElement.offsetParent()` – Jacob Mar 18 '11 at 21:35
  • @Jacob, but it works with `targetElement.offsetParent()`.. http://jsfiddle.net/gaby/2y53y/1/ – Gabriele Petrioli Mar 18 '11 at 21:36
  • I got the same results as Gaby - the code from the question works. – Mayo Mar 18 '11 at 21:39
  • Doesn't for me... I should mention that the `position` properties are not inline but are declared in a CSS file (in case it matters). – Jacob Mar 18 '11 at 21:40
  • Your jquery coding looks good - I would be sure you are referencing the right elements with your selectors in both CSS and jQuery. Firebug is handy for this. – Mayo Mar 18 '11 at 21:44
  • Still fine if you relocate the styling to CSS: http://jsfiddle.net/lthibodeaux/2y53y/3/ – lsuarez Mar 18 '11 at 21:46
  • I think I found the contributing factor (which I failed to post). `.parent` was also set to `display: none`. If it's set to `display: block`, then `offsetParent()` returned the correct element. Is that documented somewhere that display mode affects offsetParent? – Jacob Mar 18 '11 at 22:40
  • Found the answer to that: https://developer.mozilla.org/en/DOM/element.offsetParent, courtesy of http://stackoverflow.com/questions/306305/what-would-make-offsetparent-null/3877473#3877473. – Jacob Mar 18 '11 at 22:58

1 Answers1

6

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.

Jacob
  • 77,566
  • 24
  • 149
  • 228
  • I had the same issue, but it was because the element I was getting an offset parent for was invisible. It was at least affecting me in Webkit. Didn't try other browsers. – Matt James Mar 21 '14 at 17:46