座標系統 - Web API | MDN

維度

在 Web 技術使用的座標系統中，水平偏移稱為x 座標，負值表示原點左側的位置，正值表示原點右側的位置。y 座標指定垂直偏移，負值表示原點上方，正值表示原點下方。

在 Web 上，預設的原點是給定上下文的左上角（正 y 座標值在原點下方）。請注意，這與大多數數學模型不同，在數學模型中，原點位於左下角，正 y 座標值在原點上方。

當使用第三個維度從前到後分層物件時，我們使用z 軸。z 軸從觀察者延伸到螢幕表面。CSS z-index 屬性值會影響定位元素在該軸上的位置，從而產生遠離或靠近觀察者的效果。

注意：可以使用 CSS 屬性（如 transform）來更改這些座標系統的定義和方向。但是，我們目前只討論標準座標系統。

標準 CSSOM 座標系統

CSS 物件模型使用四種標準座標系統。為了幫助視覺化主要系統，下圖顯示了一個帶有瀏覽器視窗的顯示器，該視窗包含滾動到視口外部的內容。滾動到視口外部的頁面內容以半透明的形式顯示在瀏覽器視窗上方，以指示“頁面”座標的原點位置。“客戶端”、“頁面”和“視口”座標系統的原點已高亮顯示。

A large screen with a smaller browser window rendering a web page's bottom half; the top half is shown as scrolled outside the browser viewport. The top-left corners of the screen, page, and viewport are all labeled with coordinates of 0,0.

偏移量

使用“偏移量”模型指定的座標使用正在檢查的元素或發生事件的元素的左上角。

例如，當發生滑鼠事件時，事件的 offsetX 和 offsetY 屬性指定的滑鼠位置是相對於事件已分派到的節點的左上角。原點向內偏移了內邊距邊緣，即內邊距區域和邊框區域之間的邊緣。

視口

“視口”（或“客戶端”）座標系統以事件發生的視口或瀏覽上下文的左上角作為其原點。這是呈現文件的整個可視區域。

例如，在臺式計算機上，MouseEvent.clientX 和 MouseEvent.clientY 屬性指示事件發生時滑鼠游標相對於window 左上角的位置。在使用觸控筆或指標時，觸控事件中的 Touch.clientX 和 Touch.clientY 座標相對於相同的原點。

視窗的左上角始終是 (0, 0)，無論文件內容如何或是否進行了任何滾動。換句話說，滾動文件將改變文件中給定位置的視口座標。

const log = document.querySelector(".log");
const inner = document.querySelector(".inner");

function setCoords(e) {
  log.innerText = `
    Offset X/Y: ${e.offsetX}, ${e.offsetY}
    Viewport X/Y: ${e.clientX}, ${e.clientY}
    Page X/Y: ${e.pageX}, ${e.pageY}
    Screen X/Y: ${e.screenX}, ${e.screenY}`;
}

inner.addEventListener("mousemove", setCoords);
inner.addEventListener("mouseenter", setCoords);
inner.addEventListener("mouseleave", setCoords);

HTML

HTML 包含一個帶有 "log" 類的 <p> 元素，該元素顯示滑鼠事件的資料。

html

<div class="outer">
  <div class="inner">
    <p class="log">Mouse over this section to view coordinates</p>
  </div>
</div>

CSS

容器框的 "outer" 類故意設定得太寬，以便在滾動內容時檢視滑鼠座標效果。"inner" 段落是跟蹤和記錄滑鼠事件的地方。

css

.outer {
  width: 1000px;
}

.inner {
  font-family: monospace;
  position: relative;
  width: 500px;
  height: 150px;
  top: 25px;
  left: 100px;
  background-color: darkblue;
  color: white;
  cursor: crosshair;
  user-select: none;
}

.log {
  position: relative;
  width: 100%;
  text-align: center;
}