Jquery_jqueryのoffset()とposition()の詳細な分析

まず、これら 2 つのメソッドの定義を見てみましょう。
offset():
現在のビューポート内の一致する要素の相対オフセットを取得します。
返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。このメソッドは、表示されている要素に対してのみ機能します。
position():
親要素を基準とした一致する要素のオフセットを取得します。
返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。正確に計算するには、フィラー、境界線、および塗りつぶしのプロパティにピクセル単位を使用します。このメソッドは、表示されている要素に対してのみ機能します。
本当にそんなに簡単ですか?実践は真の知識をもたらします。
まず、jquery フレームワークのソース コードでposition() がどのように取得されるかを見てみましょう:

コードをコピーしますコードは次のとおりです:

// *real* offsetParent を取得します
var offsetParent = this.offsetParent(),
// 正しいオフセットを取得します
offset = this.offset (),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { 上: 0, 左: 0 } : offsetParent.offset(); // 要素を減算します。 margins
// 注: 要素に margin: auto がある場合、offsetLeft と marginLeft
// は Safari では同じなので、offset.left が誤って 0 になります
offset.top -= num( this, ' marginTop' );
offset.left -= num( this, 'marginLeft' );
// offsetParent の境界線を追加します
parentOffset.top = num( offsetParent, 'borderTopWidth' ); left = num( offsetParent, 'borderLeftWidth' );
// 2 つのオフセットを減算します
results = {
top: offset.top -parentOffset.top,
left: offset.left -parentOffset. left
};


2 つの違いをテストするには、以下のページをクリックしてください:

オフセットと位置のテスト 1<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title> <style type="text/css"> body{margin:15px;width:960px;} .parent{ border:3px solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } .child{ background:#666; width:200px; height:200px; color:#fff; } .copyright{ position:absolute; right:0; } </style> <div class="parent" style="float:right"> 瑕</div>