Object offset() does not take margin into consideration.
The offset function does not include explicitly set margins in its calculations if parents are relatively positioned. This makes the values returned not quite match the expected values for elements using it.
The odd part seems to be that auto margins seems to be calculated correctly (when running through chrome at least).
I've made a clear and stripped down example of this available at: http://sargy.net/testcase/bonzo/offset.html
(jsFiddle tucks the html inside their layout, so the offset values there is not as easy to know if they are wrong)
Same behavior verified with latest stable versions on Windows 8 (above mentioned chrome being run on OS X):
- Opera 12.15
- FireFox 20.0.1
- Chrome 26.0.1410.64
- Maxthon 4.0.5.4000
- Internet Explorer 10.0.9200.16540
The issue seems isolated to when the body is position:relative. If the body is in its natural position:static then descendent offsets seem correct even when relative. Do your findings agree?
Yes, indeed you are right.
The drawbacks of being in a too simple sandbox for testing to start off with. :)
If body has relative position then elements place as direct child will not include the margin. If a element has no parent nodes other than the body element which has a position attribute (and the body has relative position set), the same case applies it seems, I whipped together a small example similar to my first one:
http://sargy.net/testcase/bonzo/offset2.html (and sorry for hurting your eyes with my attempts to make things as clear as possible) :)