# coordinates

[browser](..) ⟩ [concepts]() ⟩ coordinate system

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

* <mark style="color:orange;">**document**</mark> coordinates&#x20;
* [viewport](../dom/type/window/viewport "mention") coordinates - also called "<mark style="color:purple;">**window coordinates**</mark>".
* <mark style="color:green;">**container**</mark> coordinates - [relatively positioned](../../css/layout/position) 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>](../dom/type/element).[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>](../dom/type/document).[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 [scroll](../dom/type/window/scroll "mention")

<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](../../css/layout/position "mention")

```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="🔴 主題" %}
* [boxes](../dom/type/element/boxes "mention")
* relative to <mark style="color:orange;">**document**</mark> coordinates
  * [viewport](../dom/type/window/viewport "mention") <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](../dom/type/element/+ext/elem.position "mention") - element's position.
  * [<mark style="color:yellow;">**absolutely positioned**</mark>](../../css/layout/position) elements.
* relative to [viewport](../dom/type/window/viewport "mention") coordinates
  * [bounding](../dom/type/element/+boxes/bounding "mention") of [element](../dom/type/element "mention")
  * [doc.elementfrompoint](../dom/type/document/methods/doc.elementfrompoint "mention")
  * [<mark style="color:yellow;">**fixed**</mark>](../../css/layout/position) elements.
* [size](../dom/type/document/size "mention")
* [padding](../dom/type/element/+boxes/padding "mention") / [border](../dom/type/element/+boxes/border "mention") / [scroll](../dom/type/element/+boxes/scroll "mention")
* [position](../../css/layout/position "mention")
* [scroll](../dom/type/window/scroll "mention")
{% 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](../dom/type/document "mention") ⟩ [.elementFromPoint()](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint)
* [element](../dom/type/element "mention") ⟩ [.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](../../css "mention") ⟩&#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="👥 相關" %}
* [boxes](../dom/type/element/boxes "mention")
  * [padding](../dom/type/element/+boxes/padding "mention") / [border](../dom/type/element/+boxes/border "mention") / [scroll](../dom/type/element/+boxes/scroll "mention") / [viewport](../dom/type/window/viewport "mention") / [bounding](../dom/type/element/+boxes/bounding "mention")
* [position](../../css/layout/position "mention")
* [scroll](../dom/type/window/scroll "mention")
{% endtab %}
{% endtabs %}
