座標系

在指定圖形上下文中的畫素位置時（就像在代數中指定座標系一樣），它的位置是相對於上下文中的固定點定義的。這個固定點稱為原點。位置指定為沿上下文每個維度從原點偏移的畫素數。

本指南介紹了 CSS 物件模型使用的標準座標系。這些通常僅在原點的位置不同。

尺寸

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

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

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

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

標準 CSSOM 座標系

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

Diagram of a computer monitor with a browser window containing content outside of the viewport. Labels show the origin for page, screen, and viewport coordinates.

偏移

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

例如，當發生滑鼠事件時，事件的offsetX 和 offsetY 屬性中指定的滑鼠位置相對於事件已傳遞到的節點的左上角。原點由padding-edge內縮，它是填充區域和邊框區域之間的邊緣。

視區

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

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

視窗的左上角始終為 (0, 0)，無論文件內容或可能已完成的任何滾動。換句話說，滾動文件會改變文件中給定位置的視窗座標。

頁面

“頁面”座標系給出畫素相對於整個渲染 Document 的左上角的位置。這意味著文件中元素中的一個點在使用者水平或垂直滾動文件後將具有相同的座標，除非元素透過佈局更改移動。

滑鼠事件的 pageX 和 pageY 屬性提供事件生成時滑鼠的位置，相對於文件的左上角。 Touch.pageX 和 Touch.pageY 座標在 觸控事件 中相對於相同的原點。

螢幕

最後，我們來到“螢幕”模型，其原點是使用者螢幕空間的左上角。此座標系中的每個點都表示一個邏輯畫素，因此值沿每個軸以整數增量和減量。如果包含的視窗移動，例如，或者使用者螢幕幾何形狀發生變化（透過更改顯示解析度或向系統新增或刪除顯示器），文件中給定點的 位置將發生變化。

MouseEvent.screenX 和 MouseEvent.screenY 屬性給出滑鼠事件位置相對於螢幕原點的座標。 Touch.screenX 和 Touch.screenY 座標在 觸控事件 中相對於相同的原點。

示例

讓我們看一個在元素中記錄滑鼠座標的示例。每當滑鼠進入、在內部移動或退出內部框時，事件都會透過在四個可用系統中記錄當前滑鼠座標來處理。

JavaScript

對於 JavaScript，程式碼透過對內部框呼叫 addEventListener() 來設定內部框的事件處理程式，分別對應 mouseenter、mousemove 和 mouseleave 型別。對於每個事件，我們都呼叫 setCoords() 函式，該函式使用每個系統的座標設定 <p> 元素的內部文字。

js
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;
}

結果

在這裡您可以看到結果生效。當您將滑鼠移入和移出藍色框時，觀察滑鼠 X 和 Y 座標的值在各種座標系中的變化。

另請參閱