JavaScript の offsetParent プロパティの詳しい説明

JavaScript の offsetParent プロパティは、その要素が属する最近の位置決めされた (position プロパティが relative、absolute、fixed) 要素を返す読み取り専用のプロパティです。offsetParent プロパティは、要素ノードオブジェクトを返します。

相対配置された要素の中にある要素は、その要素に対して配置される。絶対配置された要素の中にある要素は、最近の位置祖先要素に対して配置される。offsetParent プロパティは、この最近の位置祖先要素を返す。

親要素に相対位置、絶対位置、固定位置を設定していない場合、offsetParentは非静的定位の祖先要素（通常はbody要素）に設定され、要素自体に固定位置を設定している場合はnullになります。

offsetParentプロパティを使用すると、ページのオフセットにおける要素のオフセットを見つけることができます。offsetParentプロパティに再帰的にイテレーションし、最終的なoffsetParentがnullになるまで、各offsetLeftとoffsetTopを加算して、そのページに対する要素のオフセットを取得します。

以下は、offsetParent プロパティを使用する例です。

var element = document.getElementById("myElement");
var offsetLeft = 0;
var offsetTop = 0;
while (element) {
offsetLeft += element.offsetLeft;
offsetTop += element.offsetTop;
element = element.offsetParent;
}
console.log("Offset left: " + offsetLeft);
console.log("Offset top: " + offsetTop);

上記のコードでは、各要素の offsetLeft と offsetTop を加算し、要素をページに相対的な位置オフセットを算出するため、各要素の offsetParent 属性を再帰的に反復します。