🔰coordinates

browser ⟩ concepts ⟩ coordinate system

There are 3 different coordinate systems:

• document coordinates

• viewport coordinates - also called "window coordinates".

• container coordinates - relatively positioned container with top/left = 0.

⭐️ 重點

client-side JavaScript tends to use viewport coordinates:

• elem.getBoundingClientRect() (DOMRect) size and position (relative to viewport).

• document.elementFromPoint() topmost Element at specified coordinates (relative to viewport).

• mouseEvent/touch.clientX, mouseEvent/touch.clientY

👉 window window scrolling

window.scrollTo() takes the x and y coordinates in document coordinates.

👉 CSS position

"position"   "top/left" relative to               removed from flow
-----------------------------------------------------------------------
fixed        `viewport`                                  ✅ 
relative     where it should be                          ❌ 
absolute     `document` / nearest positioned parent      ✅ 

🔴 主題

📗 參考

📘 手冊

👥 相關