2026 iThome 鐵人賽

DAY 9

Modern Web

CSS 到底在幹嘛？30 天拯救你被 AI 爆改的網頁排版！系列第 9 篇

Day 09 - Position 屬性

18th鐵人賽 day 09 css html 法式培根吐司

饅頭

團隊第二屆技術創作市集

2026-08-28 12:00:11

63 瀏覽

分享至

今天的封面是工程師最愛的 github 吉祥物章魚貓，雖然一直不知道為什麼會是這個吉祥物，但我還是畫了一個自己的版本，希望會大家喜歡 (･ω´･ )

回到今天的主題！

在預設情況下，HTML 元素會依照程式碼順序，從上到下、從左到右排列，這稱為預設的「文件流」。但在實際開發中，我們常需要微調元素位置，或者讓元素完全脫離文件流，放置在頁面的特定位置。這時就必須運用 CSS 的 position 定位屬性。

Position 屬性

想像網頁就像一張畫布，position 屬性就是決定元素要「黏貼」在哪裡的方式。透過 position 屬性，我們可以控制元素在頁面上的位置。例如：可以將網頁導航列固定在頁面頂端、或是讓特定按鈕固定在頁面的右下角。這些排版需求都可以透過 CSS 的 position 屬性來實現。常用的定位方式共有五種，以下將依序介紹。

Static 靜態定位

靜態定位，這是所有元素的預設定位方式，不需要特別設定。元素會依照 HTML 程式碼的順序自然排列，保持在正常的文件流中。

特性

元素按照正常的文件流排列（從上到下、從左到右依序排列）
top、bottom、left、right 和 z-index 屬性無效
```
.element {
  position: static; /* 預設值 */
}
```

使用情境

一般情況下不需要特別設定，除非是需要移除其他定位效果，讓元素恢復到預設定位狀態。

Relative 相對定位

相對定位，相對於元素原本的位置進行定位。元素仍然保留在文件流中，主要是用於微調元素位置，作為其他元素的定位參考點。

特性

元素位移後，仍然存在於正常文件流中，並佔據原本的空間位置，因此不會影響到其他元素的排版位置。
可以使用 top、bottom、left、right 調整位置。

可以作為絕對定位子元素的參考點。

.element {
  position: relative;
  top: 30px;    /* 向下移動 30px */
  left: 10px;   /* 向右移動 10px */
}

使用情境

用於微調元素位置，但不影響其他元素的排版，例如：將元素稍微向下移動，使用 top 屬性調整位移距離。
當內部元素使用絕對定位時，可將外層元素設為相對定位，作為絕對定位的參考點。

Absolute 絕對定位

絕對定位，會相對於外層最近的已定位元素進行定位。可以在已定位元素中，自由移動到任意位置，且不佔據文件流空間。元素會像飄在空中一樣，下方的元素會自動往上補位，填補原本的空間。

特性

完全脫離正常文件流，不佔據空間位置，其他元素會視它為不存在，並佔用它原有的位置。
使用 top、bottom、left、right 調整位置。
相對於最近的非 static 定位的父元素（如 relative、absolute、fixed）進行定位。若外層元素為 static 定位，則不會被視為參考點。
如果沒有外層沒有 position 相對定位元素，則相對於網頁最外層的 <html> 或 <body>。

雖然可以自由移動，但如果絕對定位元素移動到設有 overflow 屬性的容器外，內容會被裁切掉。

.container {
  position: relative; /* 作為參考點 */
  .element {
    position: absolute;
    top: 0;
    right: 0;
  }
}

使用情境

適用於在特定容器中，需明確定位的元素，例如：圖示按鈕元件中，固定在右上角的紅點通知圖示；在工具列中的按鈕內，浮動的文字提示氣泡。
建立覆蓋遮罩層，完全覆蓋某個元素，例如：覆蓋整張圖片的半透明黑色建漸層遮罩。

Fixed 固定定位

固定定位，會相對於瀏覽器視窗進行定位，因此不會隨著頁面捲動而移動。可以在視窗中，自由移動到任意位置，且不佔據文件流空間。

特性

完全脫離正常文件流，不佔據空間位置，其他元素會視它為不存在，並佔用它原有的位置。
使用 top、bottom、left、right 調整位置。
相對於瀏覽器視窗定位，且不受頁面滾動影響。

始終停留在視窗的固定位置。

.navbar {
  position: fixed;
  bottom: 10px; /* 靠下 10px */
  right: 10px;  /* 靠右 10px */
  width: 100%;
}

使用情境

適用於需要固定在視窗特定位置的元素，例如：固定在頁面最上方的導航列；固定在頁面右下角的捲動回上方的按鈕；浮動廣告或通知等。

Sticky 黏性定位

黏性定位，結合了 relative 和 fixed 兩種定位方式的特性，可以根據滾動位置來切換定位方式。在一個內容足夠長，能產生捲軸可捲動的容器內。當捲軸還沒捲動到指定位置前，顯示方式都會像 relative 跟著內容捲動。當捲軸捲動到指定位置後，顯示方式都會像 fixed 直接固定在容器上，不跟著內容捲動。

特性

因為黏性定位跟捲軸滾動有關，所以需要滾動的容器不能設定 overflow: hidden。
必須要在內容夠長，有出現捲軸的容器中，才能看得到效果。
需要設定至少一個位置屬性（如 top: 0），才能讓黏性定位生效。
捲軸滾動到指定位置前，元素會保持在原位，跟著內容捲動（像 relative 相對定位）。
捲軸滾動到指定位置後，元素會固定在容器上，不跟著內容捲動（像 fixed 固定定位）。
黏性效果只在滾動容器範圍內有效，一旦超出該容器範圍，元素就會跟著容器一起移動離開。
```
.header {
  position: sticky;
  top: 0; /* 距離頂部 0px 時開始固定 */
}
```

使用情境

在滾動網頁時，需要特定元素在滾動到某個位置後固定顯示，但當滾動離開其父容器範圍時又會跟著消失（例如：表格標題行、滾動時固定的區塊標題、側邊欄導航）。
適合需要階段性固定但不需要全程固定的導航或標題元素。

總結

今天我們完整介紹了 CSS 中掌控元素空間位置的五大 Position 定位屬性：

static（靜態定位）：預設值，跟隨正常文件流排列，無視方位與 z-index 屬性。
relative（相對定位）：保留原本文件流空間進行微調，最常作為子層絕對定位的參考錨點。
absolute（絕對定位）：完全脫離文件流，以最近的非 static 父層為基準自由位移，適合角標、氣泡框與遮罩。
fixed（固定定位）：完全脫離文件流，直接釘在瀏覽器視窗上，常用於頂端導航列與置底按鈕。
sticky（黏性定位）：融合 relative 與 fixed，在滾動到指定門檻（如 top: 0）前隨頁面流動、到達後固定於容器內，適合表格表頭與區塊標題。