.position()
원문 링크 
http://api.jquery.com/position/
개요 : 조건에 일치하는 요소 집합 중 첫번째 요소의 문서 상의 부모 요소를 기준으로 한 상대적인 좌표값을 반환합니다.
- .position()
.offset() 함수는 어떤 요소의 문서 상의 상대적인 현재 위치를 알 수 있습니다. 오프셋 부모에 대한 상대적인 위치를 알아내는 .position()과는 다소 대비됩니다. 전역(global) 조작(특히, 드래그앤드롭을 구현하기 위해)으로 새로운 요소를 기존의 요소에 위치하기 위해서는 .offset() 함수가 더 유용합니다.
.offset() 함수는 객체의 속성 중 top 과 left 값을 반환해 줍니다.
Note: jQuery는 숨은 요소 또는 body 요소의 borders, margin, padding 값에 대한 내용은 얻어낼 수 없습니다.
.position() 함수는 어떤 요소의 문서 상의 부모 요소를 기준으로 한 상대적인 현재 위치를 알 수 있습니다. 문서 상의 상대적인 위치를 알아내는 .offset()과는 다소 대비됩니다. 기존 요소의 근처에 새로운 요소의 좌표를 설정하기에는 .position() 함수가 더 실용적입니다.
객체의 속성들 중 top 과 left값에 대한 내용을 반환해 줍니다.
예 제
두번째 문단(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 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 요소 제거, remove() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기2, prependTo() (0) | 2011.11.22 |
| jQuery API 정복 - 선택된 모든 요소의 앞에 추가하기, prepend() (0) | 2011.11.22 |
| jQuery API 정복 - border 포함 넓이 구하기, outerWidth() (0) | 2011.11.22 |
| jQuery API 정복 - border포함 높이 구하기, outerHeight() (0) | 2011.11.22 |
| jQuery API 정복 - 좌표 찾기, offset() (0) | 2011.11.22 |
| jQuery API 정복 - 앞에 추가하기, insertBefore() (0) | 2011.11.22 |