getBoundingClientRect() Vs css 좌표

getBoundingClientRect()는 엘리먼트의 좌표값을 알 수 있는 api입니다.

그런데, 이 좌표값이 css와 혼동이 있어서 정리 해 보았습니다.

 

getBoundingClientRect()

getBoundingClientRect()

 

css

 

css

ex)

(getBoundingClientRect())

right:1240px;

bottom:569

 

(css)

position: fixed

right:40px;

bottom:40px;

 

두 좌표가 같은 element를 의미하고 있습니다.

(화면크기에 따라 위에 해당 하는 값 다를 수 있음)

 

결론

getBoundingClientRect()를 이용할 때는 right, bottom의 기준이 왼쪽 상단이지만,

css에서 right, bottom을 측정할 때는 element를 기준으로 값을 지정했습니다.