.position()

分類： CSS | 偏移量 | 操作 > 樣式屬性

.position()傳回： 物件

說明： 取得相對於偏移父元素的第一個匹配元素的目前座標。

.position() 方法讓我們可以取得元素的目前位置（特別是其邊界框），相對於偏移父元素（特別是其內邊距框，不包含外邊距和邊框）。這與 .offset() 形成對比，後者取得目前位置相對於文件。在將新元素定位在另一個元素附近且在同一個包含 DOM 元素內時，.position() 較為有用。

傳回包含 top 和 left 屬性的物件。

注意： jQuery 不支援取得隱藏元素的位置座標，或計算 <html> 文件元素上設定的外邊距。

其他注意事項

  • 在某些情況下，與尺寸相關的 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.jquery.com/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>

示範