jQueryでの位置指定

jQueryでは要素の座標を操作するために、 メソッド position と offset があります。

これらのメソッドは、要素の現在の座標を取得または変更するために使用され、 結果として top と left のプロパティを含むオブジェクトを返します。

ユーザーがページのサイズを変更した場合、計算に誤差が生じることがあります。 また、これらのメソッドは非表示要素の座標を取得できません。

offset メソッドはドキュメントを基準とした要素の位置を取得し、 position メソッドは親要素のオフセットを基準とした要素の位置を取得します。

次のHTMLコードがあるとします：

html<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

段落には次のCSSスタイルが適用されています：

css#parent {
  width: 150px;
  border: 1px solid blueviolet;
}
#test {
  margin: 5px;
  text-align: center;
  outline: 1px solid green;
}

これらのメソッドを使用してdiv test の位置を取得し、 得られたオブジェクトのキーにアクセスして、 この情報を下の段落に表示してみましょう：

javascriptlet offset = $('#test').offset();
$('#text1').text(
  '(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
  '(POSITION()) left: ' + position.left + ', top: ' + position.top
);