jQuery : position ()과 offset ()의 차이점

178

차이점은 무엇이며 position()그리고 offset()? 클릭 이벤트에서 다음을 시도했습니다.

console.info($(this).position(), $(this).offset());

그리고 그들은 정확히 똑같이 반환하는 것 같습니다 ... (클릭 된 요소는 테이블의 테이블 셀 내에 있습니다)

jquery positioning

— 스 비쉬
소스

215

동일한 지 여부는 상황에 따라 다릅니다.

position오프셋 부모를 기준으로{left: x, top: y} 객체를 반환합니다.
offset문서를 기준으로{left: x, top: y} 객체를 반환합니다 .

분명히, 문서가 오프셋 부모 인 경우가 종종 있습니다. 오프셋 부모 "가장 가까운 위치 함유 요소"이다.

예를 들어이 문서에서

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

그러면 $('#sub').offset() 의지가 {left: 200, top: 200}되겠지만, .position()의지가 될 것입니다 {left: 0, top: 0}.

— 데이비드 헤드런드
소스

2

따라서 오프셋 부모는 위치가 절대로 설정된 첫 번째 부모입니까? 또는?

— Svish

1

@ Svish : 우와, 정말 코드 들여 쓰기를 놓쳤습니까? 편집을 위해 녹입니다. 예, 오프셋 부모는 가장 가까운 위치에있는 부모입니다. 즉, 위치가 절대, 상대 또는 고정 (정적이 아님)으로 설정된 요소입니다. 이것은 jQuery 또는 자바 스크립트가 아니며 CSS에서도 동일한 동작을 sub합니다 .0 : 0에 절대 위치를 지정하면 오프셋 상위의 왼쪽 상단에 있습니다.

— David Hedlund

1

참고 .position로 1.12.0에서 업데이트되었습니다 => github.com/jquery/jquery/issues/1708

— retrovertigo

본능적 인 관점과 반대되지 않습니까? 이것은 너무 임의적입니다! 나를 위해 절대 "포인트"는 위치입니다. 상대적인 "포인트"는 오프셋입니다.

— Sandburg

28

.offset () 메소드는 우리 소자의 현재 위치를 검색 할 수있는 문서에 대하여 . 이것을 오프셋 parent와 관련된 현재 위치 를 검색하는 .position () 과 대조하십시오 . 전역 조작 (특히, 끌어서 놓기 구현)을 위해 기존 요소 위에 새 요소를 배치 할 경우 .offset ()이 더 유용합니다.

출처 : http://api.jquery.com/offset/

— 얀디
소스

3

위에서 묻는 것처럼 오프셋 부모는 무엇입니까? 다른 div의 첫 번째 div에서 position ()을 호출해도 다른 스타일이나 위치 지정이없는 경우에도 항상 0,0을 반환하지는 않습니다.

— Kokodoko

2

jquery.offsetParent () : api.jquery.com/offsetparent "가장 가까운 조상 요소를 가져옵니다."

— 커티스 얄롭

-6

두 함수 모두 너비와 높이라는 두 가지 속성을 가진 일반 객체를 반환합니다.

offset ()은 문서를 기준으로 한 위치를 나타냅니다.

position ()은 부모 요소와 관련된 위치를 나타냅니다.

그러나 객체의 CSS 위치가 "절대"인 경우 두 함수 모두 너비 = 0 및 높이 = 0을 반환합니다.

— dwoutsourcing
소스

6

수정 : 오프셋 및 위치는 너비 및 높이가 아니라 왼쪽 및 위쪽 속성을 가진 객체를 반환합니다.

— Jorge Olivares