은성훈: javascript로 객체의 좌표를 다루는 방법

절대좌표는 브라우저의 화면이 기준이고, offset()함수를 이용해서 좌표를 알아내거나 설정할 수 있다.
상대좌표는 엘리먼트의 부모영역이 기준이고, position()함수를 이용해서 좌표를 알아내기만 할 수 있다.

    <!DOCTYPE html>
    <html>
      <head>
      <style>
        #pink { 
          background-color: pink; 
          position:absolute; 
          top: 34px; 
          left: 56px; 
          width:100px; 
          height:100px; 
          }
        #blue {
          background-color: blue; 
          position:relative;
          top: 5px; 
          left: 9px; 
          width:10px; 
          height:10px; 
          }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      </head>
      <body>
        <div id="pink">
          <div id="blue"></div>
        </div>
        <script>
          var p = $('#pink'), 
                b = $('#blue'),
              px, py, bx, by;

          px = p.offset().left;
          py = p.offset().top;
          alert('1p (' + px + ', ' + py + ')');
          
          bx = b.position().left;
          by = b.position().top;
          alert('1b (' + bx + ', ' + by + ')');

          p.offset({top:50, left:150});
          px = p.offset().left;
          py = p.offset().top;
          alert('2p (' + px + ', ' + py + ')');

          bx = b.position().left;
          by = b.position().top;
          alert('2b (' + bx + ', ' + by + ')');
        </script>
      </body>
    </html>

javascript로 객체의 좌표를 다루는 방법

Translate