---
description: element's top-left corner coordinates relative to the document page.
---

# elem.position()

[🔰 JS](../../../../../js) ⟩ [browser](../../../..) ⟩ [DOM](../../..) ⟩ [types](../..) ⟩ [Element](..) ⟩ [methods]() ⟩ .position()

{% tabs %}
{% tab title="🗺️ 圖解" %}
* [boxes](../boxes "mention")

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FF3f1AFI7VDFRCd3C4PGC%2Felem.position.svg?alt=media&#x26;token=a377180f-6aff-4721-866d-0e1b7f9d0c29" alt="document coordinates of an element" class="gitbook-drawing">

{% hint style="info" %}
當視窗捲動時：&#x20;

* [..](.. "mention") 的 [bounding](../+boxes/bounding "mention") 的位置座標 ([.x](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/x), [.y](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/y)) 會變
* [viewport](../../window/viewport "mention") 的位置座標 ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY)) 會變

但 [..](.. "mention") 相對於 <mark style="color:yellow;">**document**</mark> 的座標 (<mark style="color:blue;">elem.page</mark>) 不會變。
{% endhint %}
{% endtab %}

{% tab title="💾 程式" %}
:floppy\_disk: replit: [elem.position()](https://replit.com/@pegasusroe/elempageXY#script.js)

⬆️ 需要： [vector](../../../../../appendix/custom/class/vector "mention"), [boxes](../boxes "mention")

```javascript
// 🔸 elem.position()
Element.prototype.position = function(coordSystem='document'){
    // viewport to element = (x, y)
    const {x, y} = this.getBoundingClientRect();
    switch(coordSystem){
        // relative to "viewport"
        case 'viewport': return vec(x, y);
        // relative to "document"
        // document to viewport = (scrollX, scrollY)
        default: return vec(scrollX + x, scrollY + y);
    }
};
```

💈範例：

```javascript
// elements
const doc = document.documentElement;    // <html> element
const info = $('#scrollInfo');
const span1 = $('#span1');
const coords = $('#pageCoords');

// scroll handler
window.onscroll = (event) => {
    info.innerText = `viewport in page: ${viewport.positionInDocument}`;
    coords.innerHTML = `
        span in page: ${span1.position()}<br>
        span in viewport: ${span1.position('viewport')}
    `;
};
```
{% endtab %}

{% tab title="👥 相關" %}
* [viewport](../../window/viewport "mention") position relative to <mark style="color:yellow;">**document**</mark> [coordinates](../../../../concepts/coordinates "mention").
* [bounding](../+boxes/bounding "mention") of [..](.. "mention") relative to [viewport](../../window/viewport "mention").
* [mouse](../../../../event/type/mouse "mention") / [touch](../../../../event/type/touch "mention") - .[clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), .[clientY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩ [Getting document coordinates](https://tr.javascript.info/coordinates#getCoords)
{% endtab %}

{% tab title="📘 手冊" %}
* [..](.. "mention") ⟩ [.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) ⟩ ([.x](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/x), [.y](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/y))
* [window](../../window "mention") ⟩ ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY))&#x20;
{% endtab %}
{% endtabs %}
