offsetParentプロパティ

offsetParentプロパティは、要素の位置指定が行われる際の基準となる最も近い親要素を含みます。これは、CSSのpositionプロパティがstaticではない最も近い親要素、またはそのような位置指定の親要素がない場合はbodyタグになります。

構文

javascript要素.offsetParent;

例

positionプロパティがstatic以外に設定された親要素を見つけてみましょう:

html<div id="parent3">
  <div id="parent2" style="position: relative">
    <div id="parent1">
      <p id="elem">テキスト</p>
    </div>
  </div>
</div>
javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetParent.id);

コードの実行結果:

javascript'parent2'

例

親要素に位置指定がない場合、offsetParentはbodyを含みます:

html<div>
  <p id="elem">テキスト</p>
</div>
javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetParent.tagName);

コードの実行結果:

javascript'BODY'

関連項目

  • 位置指定された親要素を含むoffsetParentプロパティ
  • 要素の上からのオフセットを含むoffsetTopプロパティ
  • 要素の左からのオフセットを含むoffsetLeftプロパティ
  • 要素のオフセットを取得するgetBoundingClientRectメソッド