position 메서드

position 메서드는 문서를 기준으로 좌표를 얻는 offset 메서드와 달리, 부모 요소의 오프셋(offset)을 기준으로 요소의 위치를 얻을 수 있게 합니다. position 메서드는 동일한 부모 요소 안에서 기존 요소 옆에 새 요소를 배치할 때 더 유용합니다. 이 메서드는 top와 left 속성을 포함하는 객체를 결과로 반환합니다. 사용자가 페이지 크기를 변경하면 계산 오류가 발생할 수 있습니다. 또한 이 메서드는 숨겨진 요소의 좌표를 얻지 못합니다.

구문

현재 좌표 얻기. 어떤 경우에는 얻은 값이 소수일 수 있습니다:

$(selector).position();

예제

div 안에 위치한 단락의 위치를 position 메서드로 얻은 다음, 얻은 객체의 키에 접근하여 이 정보를 다른 단락에 출력해 보겠습니다:

<div style="padding: 15px;">
	<p style="margin-left: 10px;">text</p>
</div>
<p></p>

let position = $('p').first().position();
$('p').last().text('left: ' + position.left + ', top: ' + position.top);

함께 보기

offset 메서드,
요소의 현재 좌표를 얻을 수 있게 합니다.
offsetParent 메서드,
요소의 가장 가까운 위치 지정된 조상 요소를 얻을 수 있게 합니다.
css 메서드,
요소의 CSS 스타일을 얻고 변경할 수 있게 합니다.