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时关闭了吗？

回答

相关问题