JQuery('body').offset().top is off when using margin-top?
<p>So, if I understand <a href="http://api.jquery.com/offset" rel="nofollow">http://api.jquery.com/offset</a> correctly, $('body').offset() should return the position where the body is located, relative to the document. So inserting a <code>&lt;p&gt;</code>-tag at those coordinates on the page should put it at the very position of the body tag. But that is not what happens!</p>

<p>I tried this in both Safari 5.0.5 and Firefox 3.6 and both cases, the alert says "8" and the <code>&lt;p&gt;</code>-tag ends up 8 pixels from the top of the page, whereas the body tag starts 100 pixels further down on the page, as can be seen if inspecting using e.g firebug.</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
  &lt;div style="margin-top:100px;background:yellow;"&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
  &lt;/div&gt;

  &lt;script type="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script&gt;
    alert(jQuery('body').offset().top);
    var myp = jQuery('&lt;p&gt;Top of body?&lt;/p&gt;')
    myp.appendTo(jQuery('body'));
    myp.offset(jQuery('body').offset());
  &lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p></p>

<p>So the question is: how am I supposed to do this so that the <code>&lt;p&gt;</code>-tag ends up in the body, and not at the top of the page, using .offset()?</p>
