offsetParent 메서드

offsetParent 메서드는 요소의 가장 가까운 포지셔닝된 조상 요소를 가져올 수 있게 해줍니다. '포지셔닝된'이라는 개념은 CSS 속성 position의 값이 relative, absolute, 또는 fixed로 설정된 요소를 의미합니다. 이 메서드는 애니메이션 및 페이지상에 요소를 배치할 때 유용합니다.

구문

가장 가까운 포지셔닝된 조상 요소 가져오기:

javascript$(selector).offsetParent();

예제

#test ID를 가진 단락의 가장 가까운 포지셔닝된 (이 예제에서는 상대적으로 지정된) 조상 요소를 찾아 그 배경색을 녹색으로 칠해보겠습니다:

html<div>
  <p>aaa</p>
  <div style="position: relative;">
    <p>bbb</p>
    <p>bbb</p>
    <p>bbb</p>
    <div>
      <p id="test">ccc</p>
      <div>
        <p>ddd</p>
        <p>ddd</p>
        <p>ddd</p>
      </div>
      <p>ccc</p>
      <p>ccc</p>
    </div>
  </div>
  <p>aaa</p>
  <p>aaa</p>
</div>

javascript$('#test').offsetParent().css('background-color', 'green');

함께 보기