[html, js] offset 값은 어디를 기준으로 정해지나요?

Question

현재 점수 : 0 최고 점수 : 0

* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; min-height: 100vh; } .container { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-block; } .header { display: flex; justify-content: flex-start; align-items: center; width: 512px; height: 48px; padding: 8px; border-radius: 12px 12px 0 0; /* border-radius: 0 8px 0 8px; */ }안녕하세요? 프론트 엔드 초보자 질문좀 드립니다.canvas의 좌표값을 구하려고 canvas 속성중에 offsetTop이라는걸 사용했습니다.그런데 이게 결과가 제가 생각한 것과는 결과가 달라서 어떻게 해야 이렇게 나오는지 궁금합니다.보시다시피 container 내에 자식으로 header랑 game-screen 이 존재하고 이 둘도 각각 자식들을 가집니다.그리고 header 바로 아래에 붙어서 game-screen이 오는 배치입니다.header의 높이는 48px로 설정되어있습니다. 그렇다면 game-screen은 top에서 48px만큼 떨어진 위치에서부터 시작된다는 뜻이겠지요.이제 궁금한것이 canvas의 offsetTop인데 이게 48px이 나옵니다..저는 0이라고 생각했거든요.왜냐하면 offsetTop이라는 값이 부모를 기준으로 얼만큼 떨어져있냐를 묻는거로 알고있어서요. canvas 의 부모인 game-screen은 container 로부터 48px만큼 떨어져있으니 offsetTop 값이 48px이 나오는건 알겠습니다.그런데 canvas는 container랑은 관련이 없고 다시 부모인 game-screen 으로부터 다시 offset값을 측정해야하지 않나요?charGPT에서 물어도 그렇구요.그래서 0으로 생각하고 있었는데 48px이 나오니까 당황스럽네요.48이라는 값을보니 game-screen이랑 연관되어있어보이는데.. 이거 어떻게 되는건가요?

킁킁탐정 · Answer

부모를 기준으로 하지 않고, offsetParent를 기준으로 합니다.https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParenthttps://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetparent

[html, js] offset 값은 어디를 기준으로 정해지나요?

1개의 답변

Q&A 목록