> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/concepts/coordinates.md).

# coordinates

[browser](/web/browser.md) ⟩ [concepts](/web/browser/concepts.md) ⟩ coordinate system

{% hint style="success" %}
There are 3 different coordinate systems:

* <mark style="color:orange;">**document**</mark> coordinates&#x20;
* [viewport](/web/browser/dom/type/window/viewport.md) coordinates - also called "<mark style="color:purple;">**window coordinates**</mark>".
* <mark style="color:green;">**container**</mark> coordinates - [relatively positioned](/web/css/layout/position.md) container with <mark style="color:purple;">top</mark>/<mark style="color:purple;">left</mark> = 0.
  {% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
client-side JavaScript tends to use <mark style="color:orange;">**viewport**</mark>**&#x20;**<mark style="color:yellow;">**coordinates**</mark>:

* [<mark style="color:orange;">elem</mark>](/web/browser/dom/type/element.md).[getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)  ([DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect)) \
  size and position (relative to [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)).&#x20;
* [<mark style="color:yellow;">document</mark>](/web/browser/dom/type/document.md).[elementFromPoint()](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint) \
  topmost [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) at specified coordinates (relative to [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)).
* [<mark style="color:orange;">mouseEvent</mark>](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)/[<mark style="color:yellow;">touch</mark>](https://developer.mozilla.org/en-US/docs/Web/API/Touch).[clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), [<mark style="color:orange;">mouseEvent</mark>](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)/[<mark style="color:yellow;">touch</mark>](https://developer.mozilla.org/en-US/docs/Web/API/Touch).clientY
  {% endhint %}

{% hint style="warning" %}
👉 window [window scrolling](/web/browser/dom/type/window/scroll.md)

<mark style="color:orange;">window</mark>[.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) takes the x and y coordinates <mark style="color:yellow;">**in**</mark>**&#x20;**<mark style="color:red;">**document**</mark>**&#x20;**<mark style="color:yellow;">**coordinates**</mark>.
{% endhint %}

{% hint style="success" %}
👉 CSS [position](/web/css/layout/position.md)

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

{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* [box models](/web/browser/dom/type/element/boxes.md)
* relative to <mark style="color:orange;">**document**</mark> coordinates
  * [viewport](/web/browser/dom/type/window/viewport.md) <mark style="color:yellow;">**position**</mark>: ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY))
  * [elem.position()](/web/browser/dom/type/element/+ext/elem.position.md) - element's position.
  * [<mark style="color:yellow;">**absolutely positioned**</mark>](/web/css/layout/position.md) elements.
* relative to [viewport](/web/browser/dom/type/window/viewport.md) coordinates
  * [.boundingBox](/web/browser/dom/type/element/+boxes/bounding.md) of [Element](/web/browser/dom/type/element.md)
  * [doc.elementFromPoint()](/web/browser/dom/type/document/methods/doc.elementfrompoint.md)
  * [<mark style="color:yellow;">**fixed**</mark>](/web/css/layout/position.md) elements.
* [document size](/web/browser/dom/type/document/size.md)
* [.paddingBox](/web/browser/dom/type/element/+boxes/padding.md) / [.borderBox](/web/browser/dom/type/element/+boxes/border.md) / [.scrollBox](/web/browser/dom/type/element/+boxes/scroll.md)
* [position](/web/css/layout/position.md)
* [window scrolling](/web/browser/dom/type/window/scroll.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [x] JavaScript: The Definitive Guide (15.5 Document Geometry & Scrolling)
* [ ] JS.info ⟩
  * [x] [Coordinates](https://tr.javascript.info/coordinates)
  * [ ] [Element size and scrolling](https://javascript.info/size-and-scroll)
  * [x] [Window sizes and scrolling](https://javascript.info/size-and-scroll-window)
    {% endtab %}

{% tab title="📘 手冊" %}

* [Document](/web/browser/dom/type/document.md) ⟩ [.elementFromPoint()](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint)
* [Element](/web/browser/dom/type/element.md) ⟩ [.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
* [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent), [Touch](https://developer.mozilla.org/en-US/docs/Web/API/Touch) ⟩ [.clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), .clientY
* [CSS](/web/css.md) ⟩&#x20;
  * [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width), [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
  * Box Model ⟩ [border area](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border_area)
    {% endtab %}

{% tab title="👥 相關" %}

* [box models](/web/browser/dom/type/element/boxes.md)
  * [.paddingBox](/web/browser/dom/type/element/+boxes/padding.md) / [.borderBox](/web/browser/dom/type/element/+boxes/border.md) / [.scrollBox](/web/browser/dom/type/element/+boxes/scroll.md) / [viewport](/web/browser/dom/type/window/viewport.md) / [.boundingBox](/web/browser/dom/type/element/+boxes/bounding.md)
* [position](/web/css/layout/position.md)
* [window scrolling](/web/browser/dom/type/window/scroll.md)
  {% endtab %}
  {% endtabs %}