jQuery 좌표 : offset() , position()

    <style>
        *{
            margin:0;
            padding:0;
        }
        #container{
            width: 500px;
            height: 300px;
            margin:20px auto;
            position: relative;
            background-color: darkgray;
        }
        .box{
            width: 50px;
            height: 50px;
            left: 100px;
            top:50px;
            border:1px solid black;
            position: absolute;
        }
    </style>

    <div id="container">
        <div class="box"></div>
    </div>
    <div>
        <p>box의 절대좌표 값 top : <span></span></p>
        <p>box의 상대좌표 값 top : <span></span></p>
    </div>

위 html으로 jQuery 위치값 표현에 대해서 알아본다.

 

 

 

 

        $(function(){ 
            $('p:first > span').text($('.box').offset().top);
            $('p:last > span').text($('.box').position().top);
        });

p 태그 중에 첫번째 요소의 자식요소 span을 선택해서 box의 offset().top을 추가했고,

p 태그 마지막 요소의 자식요소 span에는 box의 position().top을 추가했다.

offset()은 container의 top-margin 20px을 포함한 전체 body 기준으로의 top 위치값이 출력되었다. (절대좌표)

position()은 container를 기준으로한 top 위치값이 출력되었다. (상대좌표)