jQuery：position（）とoffset（）の違い

178

違いは何であるposition()とはoffset()？クリックイベントで次のことを実行しようとしました。

console.info($(this).position(), $(this).offset());

そして、それらはまったく同じように返すようです...（クリックされた要素は、テーブルのテーブルセル内にあります）

jquery positioning

— スヴィッシュ
ソース

215

それらが同じかどうかは、状況によって異なります。

positionオフセットの親に関連する{left: x, top: y}オブジェクトを返します
offsetドキュメントに関連する{left: x, top: y}オブジェクトを返します。

明らかに、ドキュメントがオフセットの親である場合（多くの場合）、これらは同一になります。オフセット親は「最も近い位置含む要素」です。

たとえば、このドキュメントでは：

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

それからはに$('#sub').offset() なります{left: 200, top: 200}がそのに.position()なります{left: 0, top: 0}。

— デビッド・ヘドルンド
ソース

2

それで、オフセット親は絶対位置に設定された最初の親ですか？または？

— Svish

1

@Svish：おっと、コードのインデントを本当に逃したのですか？編集をありがとう。はい、オフセットの親は最も近くに配置された親です。つまり、位置が絶対、相対、または固定（ただし静的ではない）に設定された要素。これはjQueryでもJavaScriptでもありません。CSSでも同じ動作になります。sub絶対位置を0：0にすると、オフセットの親の左上隅になります。

— David Hedlund、2010

1

FYI、.position1.12.0 =>で更新しましたgithub.com/jquery/jquery/issues/1708

— retrovertigo

本能的な見方と正反対ではないですか？これはとても恣意的です！私にとって絶対的な「ポイント」とはポジションです。相対「ポイント」はオフセットです。

— Sandburg

28

.offset（）メソッドは、私たちは、要素の現在位置を取得することを可能にする文書に対して。これを.position（）と比較してください。これは、オフセットのparentに対する現在の位置を取得します。グローバル操作（特にドラッグアンドドロップの実装）のために既存の要素の上に新しい要素を配置する場合、.offset（）の方が便利です。

ソース：http : //api.jquery.com/offset/

— jAndy
ソース

3

上で尋ねたように、オフセットの親とは何ですか？他のスタイリングや位置付けが行われていない場合でも、別のdiv内の最初のdivでposition（）を呼び出しても、常に0,0を返すとは限りません。

— ココドコ2014年

2

jquery.offsetParent（）：api.jquery.com/offsetparent "配置されている最も近い祖先要素を取得します。"

— Curtis Yallop、2015年

-6

どちらの関数も、幅と高さの2つのプロパティを持つプレーンオブジェクトを返します。

offset（）は、ドキュメントに対する相対的な位置を参照します。

position（）は、親要素を基準にした位置を参照します

しかし、オブジェクトのcss位置が「絶対」の場合、両方の関数はwidth = 0＆height = 0を返します

— dwoutsourcing
ソース

6

修正：オフセットと位置は、幅と高さではなく、左と上プロパティを持つオブジェクトを返します。

— ホルヘオリバレス2015年