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">text</p>
    </div>
  </div>
</div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetParent.id);

코드 실행 결과:

javascript'parent2'

예제

부모 요소에 위치 지정이 없다면, offsetParent는 body를 포함합니다:

html<div>
  <p id="elem">text</p>
</div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetParent.tagName);

코드 실행 결과:

javascript'BODY'

참조