jQuery에서의 포지셔닝

jQuery에서 요소의 좌표를 다루기 위한 메서드로는 position 와 offset 가 있습니다.

이 메서드들은 요소의 현재 좌표를 얻거나 변경하는 데 사용되며, 결과로 top와 left 속성을 포함하는 객체를 반환합니다.

사용자가 페이지 크기를 변경할 경우 계산 오류가 발생할 수 있습니다. 또한 이 메서드들은 숨겨진 요소의 좌표를 얻지 못합니다.

offset 메서드는 문서를 기준으로 한 요소의 위치를 얻고, position 메서드는 부모의 여백을 기준으로 한 요소의 위치를 얻습니다.

다음과 같은 HTML 코드가 있다고 가정해 보겠습니다:

<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

단락에는 다음과 같은 CSS 스타일이 적용되어 있습니다:

#parent {
	width: 150px;
	border: 1px solid blueviolet;
}
#test {
	margin: 5px;
	text-align: center;
	outline: 1px solid green;
}

이 메서드들을 사용하여 test div의 위치를 얻고, 얻어진 객체의 키에 접근하여 이 정보를 아래 단락에 출력해 보겠습니다:

let offset = $('#test').offset();
$('#text1').text(
	'(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
	'(POSITION()) left: ' + position.left + ', top: ' + position.top
);