자바스크립트는 요소의 너비나 높이 같은 기하 정보 관련 프로퍼티가 있다.

요소를 움직이거나, 특정 좌표에 위치시킬 때 사용할 수 있다.

image.png

기하 프로퍼티들은 픽셀 단위로 측정된다.

offsetParent / offsetLeft / offsetTop

가장 바깥에 있는 기하 프로퍼티 - offset은 요소가 화면에서 차지하는 영역 전체 크기를 나타내는데, 요소의 너비와 높이에 패딩, 스크롤바, 테두리를 합친 크기이며 마진은 포함되지 않는다.

offsetParent

해당 요소를 렌더링할 때, 좌표 계산에 사용되는 가장 가까운 조상 요소의 참조를 반환한다.

offsetParent에 의해 반환되는 가장 가까운 조상 요소는 아래 셋 중 하나에 속한다.

  1. CSS position 프로퍼티가 absolute나 relative, fixed, sticky인 가장 가까운 조상 요소
  2. <td> <th> <table>
  3. <body>

offsetLeft / offsetTop

이 두 프로퍼티는 offsetParent를 기준으로 각각 요소가 오른쪽으로, 아래쪽으로 얼마나 떨어져 있는지를 나타낸다.

<main style="position: relative" id="main">
  <article>
    <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
  </article>
</main>
<script>
  alert(example.offsetParent.id); // main
  alert(example.offsetLeft); // 180 (주의: 문자열 '180px'이 아닌 숫자 180이 반환됩니다.)
  alert(example.offsetTop); // 180
</script>