⁂ jQuery/: 기본 익히기
[jQuery] #10 offset()과 position()
김갱환
2022. 9. 28. 10:37
1. 위치값
제이쿼리에서 선택된 객체의 위치값을 설정해주는 함수는 두 가지 종류가 있다.
브라우저를 기준으로 할 때는 offset(), 포지셔닝 컨텍스트(<body>)를 기준으로 할 때는 position()이 있다.
더 쉽게 표현하자면 offset은 절대좌표값을, position은 상대좌표값을 리턴한다.
offset은 페이지의 상단으로부터 선택된 요소가 보이는 현재 위치값을 설정, 리턴을 한다.
position은 선택한 요소가 속해있는 부모 요소를 기준으로 떨어져있는 위치값을 설정, 리턴한다.
이 두 메서드의 리턴 자료형은 객체인 top, left의 값이 반환이 된다.
아래의 두 상자를 보자.
파랑 상자를 클릭할 때마다 값이 출력된다.
이 때 브라우저의 크기에 따라 offset의 값은 바뀌지만 position의 값은 고정되어있는 것을 확인할 수 있을 것이다.
offset과 position