본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 상대 좌표 구하기, position()

by zoo10 2011. 11. 22.

.position()

원문 링크 http://api.jquery.com/position/

.position()Returns : Object

개요 : 조건에 일치하는 요소 집합 중 첫번째 요소의 문서 상의 부모 요소를 기준으로 한 상대적인 좌표값을 반환합니다.

  • .position()

.offset() 함수는 어떤 요소의 문서 상의 상대적인 현재 위치를 알 수 있습니다. 오프셋 부모에 대한 상대적인 위치를 알아내는 .position()과는 다소 대비됩니다. 전역(global) 조작(특히, 드래그앤드롭을 구현하기 위해)으로 새로운 요소를 기존의 요소에 위치하기 위해서는 .offset() 함수가 더 유용합니다.

.offset() 함수는 객체의 속성 중 topleft 값을 반환해 줍니다.

Note: jQuery는 숨은 요소 또는 body 요소의 borders, margin, padding 값에 대한 내용은 얻어낼 수 없습니다.

.position() 함수는 어떤 요소의 문서 상의 부모 요소를 기준으로 한 상대적인 현재 위치를 알 수 있습니다. 문서 상의 상대적인 위치를 알아내는 .offset()과는 다소 대비됩니다. 기존 요소의 근처에 새로운 요소의 좌표를 설정하기에는 .position() 함수가 더 실용적입니다.

객체의 속성들 중 topleft값에 대한 내용을 반환해 줍니다.

예 제  
두번째 문단(p태그)의 좌표에 접근해 봅니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  div { padding: 15px;}
  p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div>
  <p>Hello</p>
</div>
<p></p>

<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>

</body>
</html>

미리보기

좌표값 반환됬네요.

 

offset함수와 position 함수의 차이점을 잘 이해하셔서 사용하세요. 이건 css도 잘 알고 계시는 분이 보시면 더 좋겠네요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.