[jQuery] #10 offset()과 position()

1. 위치값

제이쿼리에서 선택된 객체의 위치값을 설정해주는 함수는 두 가지 종류가 있다.

브라우저를 기준으로 할 때는 offset(), 포지셔닝 컨텍스트(<body>)를 기준으로 할 때는 position()이 있다.

더 쉽게 표현하자면 offset은 절대좌표값을, position은 상대좌표값을 리턴한다.

offset은 페이지의 상단으로부터 선택된 요소가 보이는 현재 위치값을 설정, 리턴을 한다.

position은 선택한 요소가 속해있는 부모 요소를 기준으로 떨어져있는 위치값을 설정, 리턴한다.

이 두 메서드의 리턴 자료형은 객체인 top, left의 값이 반환이 된다.

아래의 두 상자를 보자.

파랑 상자를 클릭할 때마다 값이 출력된다.

이 때 브라우저의 크기에 따라 offset의 값은 바뀌지만 position의 값은 고정되어있는 것을 확인할 수 있을 것이다.

14_offset.html

티스토리툴바