jQuery offset().top is browser incompatible?

Question

I am trying to position an element right under some other element, but I've ran in an issue where offset() returns different values for IE and other browsers, when the page is scrolled down.

IE returns position relative to the top of the visible area (i.e. declining when you scroll down), and Firefox and Chrome always return the same value, regardless of the scrolling (which I presume is a much better behavior).

Just to clarify: what bothers me is that if none of the elements parents are relatively positioned, then offset() and position() return different values for IE, depending on how far you've scrolled down, but this is never mentioned in jQuery docs. Why is that so? Is there any way around it, that doesn't require any change of the html structure (for instance, I want to reuse one datepicker for many fields, just repositioning it slightly).

Has anyone run into the same issue?

Answer 1

Elaborating on griegs answer you can can append it to the same containing DOM element and then use .position() instead of .offset() as it will reference the position based on the parent, rather than the document. Might give you better results.

http://api.jquery.com/position/

Edit

grieg deleted his answer, this is what he said:

No but I use Append to append items after other items. So if your elements are in say a div you would append the new elements to the Div which should make them appear at the bottom

Answer 2

This should work, although it may require the parent element of elem to be relatively-positioned...

var elem = $("#elementToShowCalenderUnder");
var pos = elem.position();
$("#yourCalender").css({
  position: "absolute",
  left: pos.left() + "px";
  top: pos.top() + elem.height() + 5 + "px";
}).insertAfter(elem);