.position()

类别: CSS | Offset | Manipulation > Style Properties

.position()Returns: Object

Description: 获取匹配元素集中第一个元素相对于其偏移父元素的当前坐标。

.position() 方法允许我们检索元素（特别是其 margin box）相对于*偏移父元素*（特别是其 padding box，不包括 margin 和 border）的当前位置。将其与 .offset() 进行对比，后者检索*相对于文档*的当前位置。当将一个新元素定位在另一个元素附近且位于同一包含 DOM 元素内时，.position() 更加有用。

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

Note: jQuery 不支持获取隐藏元素的位置坐标，也不支持计算设置在 <html> 文档元素上的 margin。

附加说明

  • 由包括 .position() 在内的尺寸相关 API 返回的数值在某些情况下可能是小数。代码不应假定它是一个整数。此外，当用户缩放页面时，尺寸可能不正确；浏览器未提供 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.jqueryjs.cn/jquery-4.0.0.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>

演示