jQuery를 사용하여 요소의 절대 위치를 어떻게 찾습니까?


398

jQuery를 사용하여 요소의 절대 위치, 즉 창 시작점을 기준으로 찾는 방법이 있습니까?

답변:


650

.offset() 다음과 같이 요소의 오프셋 위치를 간단한 객체로 반환합니다.

var position = $(element).offset(); // position = { left: 42, top: 567 }

이 반환 값을 사용하여 다른 요소를 같은 지점에 배치 할 수 있습니다.

$(anotherElement).css(position)

90
나는 항상 이것을 잊어 버리고 내가 google : p
Aren

16
국경 등의 차이로 인해 항상 절대 위치를 반환하는 것은 아닙니다.
Tom

8
크롬을 사용하고 offset()있으며 올바른 상단 좌표를 반환하지 않습니다. 대신 문서에서 요소의 상단 좌표보다 약 300 픽셀 이상을 반환합니다. 왜??
SoLoGHoST

1
크롬, FF 및 IE는 다른 결과를 제공합니다 :(
Rizwan Mumtaz

3
@Aren 나는 항상 이것을 잊어 버리고 매번 당신의 코멘트를 찾는다 :)
Alex

197

문서와 관련된$(element).offset() 요소의 위치 를 알려줍니다 . 이것은 대부분의 상황에서 훌륭하게 작동하지만 예기치 않은 결과를 얻을 수 있습니다.position:fixed

문서가 뷰포트보다 길고 문서 아래쪽으로 세로로 스크롤 한 경우 스크롤 한 양만큼 position:fixed요소의 offset() 예상 값 보다 큽니다 .

position : fixed 요소의 문서가 아닌 뷰포트 (창)에 상대적인 값을 찾는 경우 고정 요소의 scrollTop()값에서 문서의 값을 뺄 수 있습니다 offset().top. 예:$("#el").offset().top - $(document).scrollTop()

만약 position:fixed 요소의 오프셋 (offset) 부모가이다 문서 , 당신이 읽고 싶은 parseInt($.css('top'))대신.


8
나는 이것을 정확하게 찾고 있었다! 나와 같은 멍청한 놈에게 : 빼야 할 가치는$(document).scrollTop()
Dr. Gianluigi Zane Zanettini

3
대박! 이것이 최고의 답변이어야합니다!
Shivanshu Goyal
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.