JQuery（'body'）。offset（）。top使用margin-top時關閉了嗎？

所以，如果我正確理解了http://api.jquery.com/offset，$（'body'）。offset（）應該返回相對於文檔正文所在的位置。因此，在頁面上的這些座標處插入一個<p>標籤應該將它放在body標籤的位置。但那不是發生了什麼！JQuery（'body'）。offset（）。top使用margin-top時關閉了嗎？

我在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>

因此問題是：我怎麼做到這一點，這樣的<p> -tag體內結束，而不是在頁面的頂部，使用.offset（）？

來源

2011-08-25 Erik Peldan

我檢查與螢火蟲的代碼，但身體標記不啓動100個像素進一步下跌。實際上它是div層。並且因爲您尚未添加style屬性'position：absolute'，所以瀏覽器將採用其默認值。這是'相對'。 – reporter

嗯..真的嗎？如果我將鼠標放在螢火蟲面板的「」字符串上，它只會突出顯示div，所以我認爲這意味着身體從那裏開始。我也嘗試在主體中添加點擊處理程序，例如'jQuery（'body'）。click（function（）{alert（「click」）;}）;'，只有在div內單擊時纔會觸發。 –

看看「佈局」面板。 – reporter

在大多數情況下，您會發現body offset等於0，這是因爲頁面的主體是您的瀏覽器視口。

Hello World是100px的原因，因爲你已經應用了填充。你想要你的文字「身體的頂部？」出現在Hello World下面？

如果是這樣，首先給你的div一個類名（我用過hworld），然後把你的var追加到它。

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

和：

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

希望這有助於...

來源

2011-08-25 11:46:50 Naz

謝謝你的建議，但這不是我想要的。我試圖在我認爲是身體的頂部，即div的開始處添加「身體的頂部」。但事實證明情況並非如此。我現在知道身體從頁面的開始處開始。現在我只是困惑，爲什麼身體註冊的點擊處理程序不會觸發，直到我點擊div內。 –

一定有別的東西與你的代碼干擾。

它工作正常，在這種提琴我創建：http://jsfiddle.net/jasongennaro/7sGGq/

來源

2011-08-25 11:56:18

JQuery（'body'）。offset（）。top使用margin-top時關閉了嗎？

回答

相關問題