JQuery('body').offset().top 在使用 margin-top 时关闭？答案

【问题标题】：JQuery('body').offset().top is off when using margin-top?JQuery('body').offset().top 在使用 margin-top 时关闭？
【发布时间】：2011-08-25 11:12:11
【问题描述】：

所以，如果我正确理解http://api.jquery.com/offset，$('body').offset() 应该返回正文所在的位置，相对于文档。因此，在页面上的这些坐标处插入一个<p>-tag 应该将它放在 body 标记的位置。但事实并非如此！

我在 Safari 5.0.5 和 Firefox 3.6 和这两种情况下都试过这个，警报显示“8”，<p>-tag 结束于页面顶部 8 像素，而 body 标记开始 100 像素在页面的下方，如果使用例如 firebug 进行检查，可以看到。

<!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 出现在正文中，而不是在页面顶部？

【问题讨论】：

我用萤火虫检查了你的代码，但正文标签并没有从 100 像素开始向下。实际上它是 div 层。并且因为您没有添加样式属性“位置：绝对”，所以浏览器采用他的默认值。这是“相对的”。
嗯.. 真的吗？如果我将鼠标悬停在萤火虫面板中的“”字符串上，它只会突出显示 div，所以我认为这意味着身体从那里开始。我还尝试在正文中添加一个单击处理程序，例如jQuery('body').click(function(){alert("click");});，它仅在在 div 内单击时触发。
好的，谢谢。我想这就是我困惑的原因。基本上，我假设正文从包含 div 的同一位置开始，因为正文上任何已注册的单击处理程序只会在单击 div 时触发，而不是在其上方由边距创建的空白区域上触发。

标签： javascript jquery

【解决方案1】：

在大多数情况下你会发现 body 偏移量等于 0，这是因为页面的 body 是 == 你的浏览器视口。

Hello World 向下 100 像素的原因是因为您对其应用了填充。你想要你的文字“身体顶部”吗？出现在 Hello World 下方？..

如果是这样，首先给你的 div 一个类名（我用过 hworld），然后将你的 var 附加到它上面。

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

还有：

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

希望这会有所帮助...

【讨论】：

感谢您的建议，但这并不是我想要的。我试图在我认为是身体顶部的地方添加“身体顶部”，即 div 的开头。但事实证明并非如此。我现在知道正文从页面的开头开始。现在我很困惑为什么在我点击 div 之前，身体注册的点击处理程序不会触发。

【解决方案2】：

一定有其他东西干扰了您的代码。

在我创建的这个小提琴中运行良好：http://jsfiddle.net/jasongennaro/7sGGq/

【讨论】：