offsetParent 속성
offsetParent 속성은 요소의 위치가 기준이 되는
가장 가까운 부모 요소를 포함합니다. 이는 CSS position 속성이
static이 아닌 가장 가까운 부모 요소이거나,
해당하는 위치 지정 부모가 없는 경우 body 태그가 됩니다.
구문
요소.offsetParent;
예제
position 속성이 static과 다른 부모 요소를
찾아봅시다:
<div id="parent3">
<div id="parent2" style="position: relative">
<div id="parent1">
<p id="elem">text</p>
</div>
</div>
</div>
let elem = document.querySelector('#elem');
console.log(elem.offsetParent.id);
코드 실행 결과:
'parent2'
예제
부모 요소에 위치 지정이 없다면,
offsetParent는 body를 포함합니다:
<div>
<p id="elem">text</p>
</div>
let elem = document.querySelector('#elem');
console.log(elem.offsetParent.tagName);
코드 실행 결과:
'BODY'
참조
-
위치 지정 부모를 포함하는
offsetParent속성 -
요소의 위쪽 오프셋을 포함하는
offsetTop속성 -
요소의 왼쪽 오프셋을 포함하는
offsetLeft속성 -
요소의 오프셋을 찾는
getBoundingClientRect메서드
