まくまくJavaScriptノート
HTML 要素の位置を取得する
ある HTML 要素の左上の座標を取得するには次のようにします。 ページの左上からの絶対座標や、親要素からの相対座標で取得することができます。
var $e = $('#box');
// document（ページ左上）からの絶対座標
var x1 = $e.offset().top;
var y1 = $e.offset().left;
// 親要素の左上を (0,0) とした相対座標
var x2 = $e.position().top;
var y2 = $e.position().left;
ここで、親要素としてみなされるのは、position 属性に relative、absolute、fixed のいずれかをもつ直近の親要素です。
$e.position() でうまく値が取れない場合は、親要素にこの指定を忘れていることが多いので注意してください（デフォルトの position: static のままになっている）。
次のデモでは、div 要素 (#box) の座標をリアルタイムに取得して表示しています。
これらの座標値は、ページをスクロールしても変化しないところがポイントです（ただし、ズームを行ってレイアウトが崩れた場合などは、座標値が変化することがあります）。
var e = document.getElementById('box');
var rect = e.getBoundingClientRect(); // 画面左上を基準とする位置
// document（ページ左上）からの絶対座標
var x1 = rect.top + window.pageYOffset;
var y1 = rect.left + window.pageXOffset;
// 親要素の左上を (0,0) とした早退座標は、計算が複雑なので省略。。。
jQuery を使わずに offset() 相当の座標値を取得するには、上記のように若干の計算が必要です。
ウィンドウ（表示領域）の左上を原点 (0, 0) とみなした相対座標で要素の位置を取得するには次のようにします。
var e = document.getElementById('box');
// スクリーン左上を (0, 0) とした相対座標
var rect = e.getBoundingClientRect();
console.log(rect.top);
console.log(rect.left);
var $e = $('#box');
// スクリーン左上を (0, 0) とした相対座標
var rect = $e.get(0).getBoundingClientRect();
console.log(rect.top);
console.log(rect.left);
この座標値は、ウィンドウ内で表示されている要素の位置が変化すると同時に変化します。
要素が画面の上に隠れている場合は、top プロパティの値はマイナスになります。
