jQuery（'body'）。offset（）。top在使用margin-top時關閉？

Question

因此，如果我正確理解了http://api.jquery.com/offset ，則$（'body'）。offset（）應該返回正文相對於文檔的位置。 因此，在頁面上的這些坐標處插入<p> -tag應該將其放置在body標簽的位置。 但是，這不會發生！

我在Safari 5.0.5和Firefox 3.6以及兩種情況下都嘗試過此操作，警報顯示為“ 8”，而<p> -tag從頁面頂部開始出現8個像素，而body標簽從下方開始出現100個像素該頁面，如果使用例如螢火蟲進行檢查可以看到。

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

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

</body>

所以問題是：如何使用.offset（）使<p> -tag最終出現在正文中，而不是出現在頁面頂部？

Answer 1

在大多數情況下，您會發現正文偏移量等於0，這是因為頁面的正文是==您瀏覽器的視口。

Hello World下移100px的原因是因為您對其應用了填充。 您是否要輸入文字“正文”？ 出現在Hello World下面嗎？

如果是這樣，首先給div一個類名（我用過hworld），然后將var附加到它上面。

<div style="margin-top:100px;background:yellow;" class="hworld">

和：

myp.appendTo(jQuery('.hworld'));

希望這可以幫助...

Answer 2

可能還有其他干擾您的代碼的東西。

在我創建的這個小提琴中效果很好： http : //jsfiddle.net/jasongennaro/7sGGq/

jQuery（'body'）。offset（）。top在使用margin-top時關閉？

問題描述

2 個解決方案

解決方案1
0 2011-08-25 11:46:50

解決方案2
0 2011-08-25 11:56:18

jQuery（&#39;body&#39;）。offset（）。top在使用margin-top時關閉？

問題描述

2 個解決方案

解決方案1 0 2011-08-25 11:46:50

解決方案2 0 2011-08-25 11:56:18

jQuery（'body'）。offset（）。top在使用margin-top時關閉？

解決方案1
0 2011-08-25 11:46:50

解決方案2
0 2011-08-25 11:56:18