Jquery[제이쿼리] position() 메서드배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] position() 메서드를 배워보겠습니다. 
position()메서드는 offset() 메서드랑 비슷하답니다.

준비화면 입니다.
위화면처럼 준비해주세요~

실행 화면입니다~~ 
오늘은 간단하니까 금방끝날꺼에요~

===============================
$('.d2').click(function(){
   var divposition = $(this).position();
   alert("position_top: "+divposition.top+" position_left: "+divposition.left);
  }); 
===============================

기본적으로 offset() 메서드랑 쓰는방법은 똑같습니다.

실행을 한뒤 class d2를 클릭하니 offset()메서드랑 똑같은 값이 나옵니다.!
도대체 offset()메서드랑 position()메서드랑 차이점이 머냐! 하는분들은

===============================
position: relative;
===============================
class="d2" <div>를 감싸고 있는  class="d1" <div>의 css의 position: relative;
일경우에는 브라우저창의 위치값이아닌 부모객체의 에서의 위치값을 리턴해준답니다.!
즉 위에 코드를보면 

===============================
<div class="d1">
   <div class="d2"></div>
 </div>
===============================
이런식으로 되어있습니다.
 <div class="d2"></div><== 이부분은 
<div class="d1"><==아래에 있기때문에 부모 자식이라고 생각하시면됩니다.!

실행을 해보면 
position_top : 0
position_left : 0
이라고 나오는것을 확인할수있답니다.!

===============================
padding-top: 50px;
padding-left: 50px;
===============================
class="d1" <div>의 css의 padding값들을 수정을 한뒤 실행을 해보겠습니다.

아까는
position_top : 0
position_left : 0
이란값들이 나왔지만 이번에는 
position_top : 50
position_left : 50
인것을 확인할수 있습니다.
position()메서드를 사용할시 부모객체에서부터 위치값을 알기위해서는!
부모객체 css의 position: relative;
으로 반경해주시는게 무지무지 중요하답니다.!

오늘은 제이쿼리[jquery] position() 메서드를 배워보았습니다.
offset()랑 position()랑 비슷하니 차이점을 기억해두세요~
그럼다음에 또만나요~