.position()

http://api.jquery.com/position/

サイト管理者より:
このメソッドと対照関係にある.offset()の機能が、そのままこのメソッドの機能として紹介されていました。その事についてのご指摘をいただき、2014/11/27に修正致しました。

オフセットの相対関係となる親要素を基準として、マッチしている要素集合の1つ目の要素の現在の座標を取得します。

.position( ) 1.2追加
例

.position( ) 1.2追加

戻り値:Object

.position()メソッドは、オフセットの関係にある親要素を基準に現在位置を取得します。これとは対照的に.offset()は、 documentを基準に現在位置を取得します。別の要素の近くに新しい要素を配置する場合、同じコンテナ要素内に配置する場合には、 .position()を使用するとより便利です。

topとleftのプロパティを含むオブジェクトが返されます。

注意: jQueryはhidden要素の位置座標の取得、またはbody要素に設定されたborder、margin、paddingを考慮しての位置計算をサポートしません。

追加の注意事項

.position()を含む寸法に関係するAPIによって返される数値は、場合によっては端数になることがあります。コード上でこれを整数とみなすべきではありません。また、寸法に関する情報はユーザーによってページがズームされている場合、不正確になる可能性があり、ブラウザはこの状態を検出するAPIを提供していません。

例

2つ目の段落に、1つ目の段落の位置情報が出力されます。

<!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>