jQuery.position() left issue

我正在阅读这里的jQuery.position()文档，示例代码打印position.left = 15，而当我在codepen测试相同的代码时(在chrome和firefox上)，它打印23。似乎<body>有8px的边距，它增加了<div>的15px填充，结果是23px。但是正如官方文档所说，这个函数"检索元素相对于偏移的父元素的当前位置"，那么为什么这些主要浏览器输出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>

就像处理"position: absolute"项并尝试定位它们一样，偏移父项不是直接父项。它遍历dom，直到找到在默认布局模式下是而不是的父元素。在父元素上使用任何非静态位置都会将此设置为元素的offset-container。

在您的示例中，在非静态模式中没有任何偏移父节点，因此它将body作为父节点。

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

div {position:relative;}

相关内容

最新更新

热门标签：