.position()

类别：CSS | Offset | 文档处理 > 样式属性

.position()返回类型：Object

描述：取得匹配的元素集合中第一个元素的当前坐标，相对于定位父元素。

.position()方法允许我们相对于定位父元素（特指是它的补白框，它排除了边距和边框）检索元素的当前位置（特指是它的边距框）。相较之下，用.offset()，它是检索相对于文档的当前定位。如果在相同的包含DOM元素内部要定位一个新元素靠近另一个，.position()更有用。

返回一个对象，包含了属性top和left。

注意：jQuery并不支持取得隐藏元素的坐标，或者计算设置在<html>文档元素上的边距。

补充说明：

  • 由尺寸相关的API返回的数字，包括.position()，在一些情况下可能是小数。代码并不假设它是一个整型数。而且，当用户缩放网页时，尺寸可能不正确；浏览器并不曝露一个API，以诊测此条件。

示例：

访问第二个段落的位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!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="https://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>

演示：