브라우저에서 dom 관련 상하좌우 판단 기준에 대한 정확한 이해가 부족해서, 확실하게 짚고 넘어가고자 확인해본다.

offset

현 element 의 outer border 에서부터 offsetParent 의 inner border 까지의 상대적인 거리

offsetParent

현 element 에서 가장 근접한 positioned 조상 element

positioned 조상 element

• non-static position element
• td, th, table (자체 static positioned element 인 경우의)

offsetTop / offsetLeft 는 offsetParent 의 상대적인 padding edge 에 따라 결정된다.

Element.getBoundingClientRect()

DOMRect object 를 리턴하는 함수.
element 의 size 관련 정보와, viewport 에 상대적인 postiion 정보를 return

DOMRect: padding 과 border-width 포함하는 가장작은 직사각형

• left, top, right, bottom, x, y, width, height
• width & height = element + padding + border-width
  • box-sizing: border-box; 일 경우, element의 width & height 과 같아진다. (기본 content-box;)

document 의 top-left 코너로부터의 상대값을 원한다면, window.scrollY / window.scrollX 를 더해줘라

refererence

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
• https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect