親要素のoffsetParentとオフセットの理解を深める
offsetParentは、要素がページ内において最も近い配置された祖先要素(positionプロパティが設定されている要素)に対する相対的な位置のオフセットです。DOMのプロパティであり、要素のoffsetParentプロパティから取得できます。
offsetParentは要素のpositionプロパティの値により決定され、要素のpositionプロパティの値が static(初期値)であれば、そのoffsetParentは最も近い非static配置祖先要素となる。要素のpositionプロパティの値が relative、absolute、fixedであれば、そのoffsetParentは最も近い非static配置かつdisplayプロパティの値が noneでない祖先要素となる。要素自体がルート要素であったりoffsetParentを持たない場合、そのoffsetParentはnullとなる。
要素が親要素(offsetParent)の左上端からどれだけ離れているかの値です。要素の offsetLeft や offsetTop プロパティから取得できます。
注意点として、offsetParent、offsetLeft、offsetTopなどのプロパティはすべて読み取り専用で、それらの値を変更することで要素の位置を変えることはできません。
全体としてoffsetParent は、要素を祖先要素に対する位置に配置するために使用され、offsetLeft と offsetTop は、その要素を offsetParent に対するオフセット値を取得するために使用されます。これらのプロパティは、要素を配置および位置決めする場合に非常に便利です。