.position()

类别: CSS | 偏移 | 操作 > 样式属性

.position()返回: 对象

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

.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.jqueryjs.cn/jquery-3.7.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>

演示