offsetTop、offsetLeft、offsetParentの詳細な説明原生JSの中で。
オフセットの上部:
offsetTop属性は、要素がそのoffsetParent要素に対して上端からどれだけ離れているかを返します。offsetParentとは、現在の要素から最も近い、既に定位されている(position属性値がstaticでない)祖先要素を指します。
offsetTopプロパティの値は、ピクセル単位の整数です。要素が非表示(displayプロパティの値がnone)の場合や、要素の親要素のstyle属性のvisibilityプロパティの値がhiddenの場合、offsetTopプロパティは0を返します。
オフセット左:
offsetLeft属性は、要素がそのoffsetParent要素に対して左端からどれだけ離れているかを返します。offsetParentとは、現在の要素から最も近い、既に配置された(positionプロパティの値がstaticでない)祖先要素を指します。
offsetLeftプロパティは、ピクセル単位の整数値を返します。要素が非表示(displayプロパティがnone)であるか、親要素のstyleプロパティのvisibilityプロパティがhiddenに設定されている場合、offsetLeftプロパティは0を返します。
親要素:
offsetParentプロパティは、要素のoffsetParent要素を返します。offsetParentは、現在の要素から最も近い既に位置指定された(positionプロパティの値がstaticでない)祖先要素を指します。
もし要素のoffsetParentがbody要素であるならば、その要素はページ内のルート要素であることを意味します。
offsetParent属性は、要素を返します。要素がoffsetParentを持たない場合はnullを返します。
まとめ:
offsetTopとoffsetLeftプロパティは、要素がそのoffsetParent要素に対して上端と左端の距離を取得するために使用されます。
offsetParentプロパティは、要素のoffsetParent要素、つまりその要素に最も近い既に位置が指定された祖先要素を取得するために使用されます。