> 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/dom/type/element/+ext/elem.position.md).

# elem.position()

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

[🔰 JS](/web/js.md) ⟩ [browser](/web/browser.md) ⟩ [DOM](/web/browser/dom.md) ⟩ [types](/web/browser/dom/type.md) ⟩ [Element](/web/browser/dom/type/element.md) ⟩ [methods](/web/browser/dom/type/element/+ext.md) ⟩ .position()

{% tabs %}
{% tab title="🗺️ 圖解" %}

* [box models](/web/browser/dom/type/element/boxes.md)

<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&amp;token=a377180f-6aff-4721-866d-0e1b7f9d0c29" alt="document coordinates of an element" class="gitbook-drawing">

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

* [Element](/web/browser/dom/type/element.md) 的 [.boundingBox](/web/browser/dom/type/element/+boxes/bounding.md) 的位置座標 ([.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](/web/browser/dom/type/window/viewport.md) 的位置座標 ([.scrollX](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX), [.scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY)) 會變

但 [Element](/web/browser/dom/type/element.md) 相對於 <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](/web/appendix/custom/class/vector.md), [box models](/web/browser/dom/type/element/boxes.md)

```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](/web/browser/dom/type/window/viewport.md) position relative to <mark style="color:yellow;">**document**</mark> [coordinates](/web/browser/concepts/coordinates.md).
* [.boundingBox](/web/browser/dom/type/element/+boxes/bounding.md) of [Element](/web/browser/dom/type/element.md) relative to [viewport](/web/browser/dom/type/window/viewport.md).
* [mouse event](/web/browser/event/type/mouse.md) / [touch event](/web/browser/event/type/touch.md) - .[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="📘 手冊" %}

* [Element](/web/browser/dom/type/element.md) ⟩ [.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](/web/browser/dom/type/window.md) ⟩ ([.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 %}