Question

我正在阅读jQuery.position（）文档here，示例代码打印position.left = 15，而我在codepen here测试了相同的代码（同时在chrome和它打印23.似乎<body>有8px的边距，它增加了<div>中的15px填充，结果是23px。但是正如官方文档所说，这个函数＆＃34;检索元素相对于偏移父元素的当前位置＆＃34;，那么为什么那些主要的浏览器输出23而不是18？

示例代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <style>
  div {
    padding: 15px;
  }
  p {
    margin-left: 10px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
  <p>Hello</p>
</div>
<p></p>

<script>
var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
</script>

</body>
</html>

Answer 1

就像在玩“position：absolute”项目并尝试定位它们时一样，偏移父项不是直接父项。它沿着dom走，直到找到默认布局模式中 not 的父级。使用父级上的任何非静态位置都会将其设置为元素的偏移容器。

在您的示例中，在非静态模式下没有任何偏移父项，因此它将主体作为父项。

正如Yogesh Sharma建议的那样：设置以下内容应该有所帮助：

div {position:relative;}

jQuery.position（）离开了问题

1 个答案: