I have two div elements that are twins (i.e. their dimensions and contents are identical). I want to move of those div-s over another, so that their corners are at exactly the same coordinates. What I try to do is:
var offset = $('div#placeholder').offset();
$('div#overlay').css('position', 'absolute').css('left', offset.left + 'px').css('top', offset.top + 'px')
-- but this causes the overlay to be exactly (or almost exactly, taking subpixel accuracy into account) 16px below the placeholder (below, i.e. overlay_top = placeholder_top + 16px).
I'm aware that offset() gives position relative to the document, and position: absolute sets position relative to body element, but compensating for body offset() doesn't help much (I'm getting 8px offset, equal to margins):
offset.top -= $('body').offset().top;
offset.left -= $('body').offset().left;
Also, compensating for body margins (in case they were different that offset() didn't help, as they were set to 8px).
Does somebody know what I'm doing wrong here?
UPDATE: Take a look at here - I'm getting the same result in FireFox 3.6.3 and Opera 10.10.
