# elem.position()
[🔰 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)
{% hint style="info" %}
當視窗捲動時：
* [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) 相對於 **document** 的座標 (elem.page) 不會變。
{% 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; // 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()}
span in viewport: ${span1.position('viewport')}
`;
};
```
{% endtab %}
{% tab title="👥 相關" %}
* [viewport](/web/browser/dom/type/window/viewport.md) position relative to **document** [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))
{% endtab %}
{% endtabs %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://lochiwei.gitbook.io/web/browser/dom/type/element/+ext/elem.position.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.