ホームページ > 記事 > ウェブフロントエンド > offsetParentアルゴリズム解析_基礎知識
要素 A の offsetParent プロパティを呼び出すときは、次のアルゴリズムに従って要素を返す必要があります。
次の条件のいずれかが true の場合、null を返し、アルゴリズムを停止します。
A はルート要素です。
A は HTML の body 要素です。
要素Aのposition属性の計算値は固定です。注1
AがHTML要素領域で、その上位要素連鎖にHTML要素マップが存在する場合、上位要素連鎖の中でAに最も近いHTML要素マップを返し、このアルゴリズムを停止する。注2
以下の条件のいずれかが当てはまる場合、以下の条件を満たす最も近い上位要素をAに返し、このアルゴリズムを停止します。
親要素のposition属性の計算値は静的ではありません。注3
親要素はHTMLのbody要素です。注4
Aのposition属性の計算値は静的であり、上位要素はtd、th、またはtableとなる。
null を返します。
前述のとおり、上記は草案の内容であるため、現在のブラウザと必ずしも一致するわけではありません。
注 1 Firefox は適用されません。適用可能; DOCTYPE により IE 7 が適用不可になります 固定がサポートされている場合は適用されません (以下、IE 6 モードと呼ばれます)。
注 2 Firefox では利用できません。
注3 親要素のposition属性の計算値は固定であり、IE 6およびIE 6モードには適用されません。
注 4 IE 7 モードでは、要素の位置属性の計算値が絶対または相対の場合、BODY の代わりに要素 HTML が返されます。
まとめ
各ブラウザ、各ブラウザの各バージョン、同じバージョンの異なるモードで offsetParent を取得するためのアルゴリズムが異なり、非常に面倒であることがわかります。したがって、offsetParent ループと offsetLeft および offsetTop を通じて、ブラウザ内のコントロールの絶対位置を取得するものとして理解することをお勧めします。
しかし幸いなことに、さまざまなブラウザーで同じ offsetParent を持つ共通のレイアウトが存在します。つまり、外側の要素 div の計算された位置の値が相対的または絶対的な場合、内側の要素 div の offsetParent は常に外側の要素です。要素の分割