절대적인 위치값과 상대적인 위치값을 알아보기 위하여 데모코드를 작성을 하다가 깨닫게 된 점이다.
외곽선이 들어있는 부모 엘리먼트 속에 자식 엘리먼트가 absolute라면 제로가 되는 지점이 0일줄 알았는데 좌표값이 외곽선 두께가 되는것을 알게 되었다.

border: 4px solid red로 부모 엘리먼트에다 스타일을 적용하면 자식 엘리먼트의 위치는 left: 4px; top: 4px부터 시작된다는 점이다.
box-sizing: border-box;로 설정해놔도 마찬가지다.
만약에 깔끔하게 0으로 시작하고 싶다면 보정값을 넣어서 빼던지 외곽선을 그림자로 만들어 쓰는것을 권장한다. 예) box-shadow: 0 0 0 1px hsl(0 0% 0% / 100%)

데모