CSS Position 怎麼用？5種定位方式打造獨特排版

CSS Position 定位原理

想要打破傳統的網頁排版模式嗎？CSS Position 是你的最佳工具！透過巧妙運用五種定位方式，你可以創造出錯位、不對稱、層疊等各種視覺效果，讓網站設計更具創意和吸引力。

CSS Position 有五個值：static、relative、absolute、fixed 和 sticky。每個都有不同的行為和用途，掌握它們的差異是創造出色排版的關鍵。

Static 靜態定位 - 預設行為

position: static 是所有 HTML 元素的預設值。靜態定位的元素遵循正常文件流，從上到下、從左到右依序排列。

主要特徵：

• 遵循文件流：元素依照 HTML 結構排列
• 忽略定位屬性：top、right、bottom、left 無效
• 預設層級：無法使用 z-index 控制堆疊順序

如你所見，即使設定了 top: 50px 和 left: 50px，靜態元素依然保持在正常文件流的位置。

Static 靜態定位基本語法

.static-element {
  position: static; /* 預設值 */
  /* top, left, right, bottom 對靜態元素無效 */
  top: 50px;    /* ❌ 被忽略 */
  left: 50px;   /* ❌ 被忽略 */
  z-index: 999; /* ❌ 被忽略 */
}

Relative 相對定位 - 相對原始位置偏移

position: relative 讓元素相對於自身原始位置偏移，同時在文件流中保留原始空間。這會為絕對定位的子元素創建「定位上下文」。

主要特徵：

• 保持文件流：原始空間得以保留
• 創建定位上下文：成為絕對定位子元素的參考點
• 接受定位屬性：top、right、bottom、left 作為偏移量生效

注意盒子 2 如何從原始位置移動（top: 20px, left: 30px），但其在文件流中的原始空間被保留，防止其他元素上移。

Relative 相對定位語法

.relative-element {
  position: relative;
  top: 20px;    /* ✅ 從原始位置向下移動 20px */
  left: 30px;   /* ✅ 從原始位置向右移動 30px */
  z-index: 1;   /* ✅ 可以控制堆疊順序 */
}

/* 為絕對定位子元素創建定位上下文 */
.relative-parent {
  position: relative; /* 絕對定位子元素的參考點 */
}

.absolute-child {
  position: absolute;
  top: 0;    /* 相對於 .relative-parent */
  right: 0;  /* 相對於 .relative-parent */
}

Absolute 絕對定位 - 脫離文件流

position: absolute 將元素從正常文件流中移除，相對於最近的已定位祖先元素（position 不為 static 的元素）定位。

主要特徵：

• 脱離文件流：不影響其他元素位置
• 相對祖先定位：以最近已定位父元素為參考
• 完全定位控制：可使用所有四個定位屬性

試試懸停在絕對定位盒子上！它們精確定位在容器中，不影響正常文件流。

Absolute 絕對定位語法

/* 容器設置定位上下文 */
.container {
  position: relative; /* 創建定位上下文 */
  height: 300px;
  width: 100%;
}

/* 絕對定位元素 */
.absolute-element {
  position: absolute;
  top: 50px;     /* ✅ 距離已定位祖先元素頂部 50px */
  left: 20px;    /* ✅ 距離已定位祖先元素左側 20px */
  right: 30px;   /* ✅ 距離已定位祖先元素右側 30px */
  bottom: 40px;  /* ✅ 距離已定位祖先元素底部 40px */
  z-index: 10;   /* ✅ 控制堆疊順序 */
}

/* 常見的絕對定位模式 */
.top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美置中 */
}

.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

Fixed 固定定位 - 相對視窗定位

position: fixed 相對於瀏覽器視窗定位元素。固定定位的元素在頁面滾動時保持相同位置，非常適合導航列、浮動按鈕或通知。

主要特徵：

• 視窗參考：始終相對於瀏覽器窗口定位
• 滾動無關：頁面滾動時保持位置不變
• 脱離流：與絕對定位一樣，不影響其他元素

滾動上方容器可以看到固定頭部和按鈕如何保持位置。在真實網頁中，這些元素會相對於瀏覽器窗口保持固定。

Fixed 固定定位語法

/* 固定頭部，滾動時保持在頂部 */
.fixed-header {
  position: fixed;
  top: 0;           /* ✅ 始終距離視窗頂部 0px */
  left: 0;          /* ✅ 始終距離視窗左側 0px */
  right: 0;         /* ✅ 延伸至全寬 */
  z-index: 1000;    /* ✅ 在其他內容上方 */
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 固定浮動按鈕 */
.floating-button {
  position: fixed;
  bottom: 20px;     /* ✅ 始終距離視窗底部 20px */
  right: 20px;      /* ✅ 始終距離視窗右側 20px */
  z-index: 999;
  background: #007bff;
  border: none;
  border-radius: 50px;
  padding: 1rem;
}

/* 固定側邊欄 */
.fixed-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;    /* 全視窗高度 */
  width: 250px;
  background: #f8f9fa;
  overflow-y: auto; /* 內容可滾動 */
}

/* 固定模態覆層 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;        /* 覆蓋整個視窗 */
  background: rgba(0,0,0,0.5);
  z-index: 10000;
}

Sticky 黏性定位 - 兩全其美

position: sticky 結合了相對定位和固定定位。元素開始時表現為相對定位，當滾動到指定位置時變為固定定位。

主要特徵：

• 混合行為：在相對和固定定位間切換
• 滾動閾值：在指定偏移量處激活
• 容器約束：只在父容器內黏附

注意進度條如何隨著滾動更新，側邊欄在到達頂部閾值時如何黏附！

Sticky 黏性定位語法

/* 基本黏性定位 */
.sticky-header {
  position: sticky;
  top: 0;           /* ✅ 到達距離頂部 0px 時黏附 */
  z-index: 100;
  background: white;
  border-bottom: 1px solid #eee;
}

/* 黏性側邊欄，在頭部下方黏附 */
.sticky-sidebar {
  position: sticky;
  top: 80px;        /* ✅ 距離視窗頂部 80px 處黏附 */
  height: fit-content;
  max-height: calc(100vh - 100px); /* 防止溢出 */
  overflow-y: auto;
}

/* 黏性表格標題 */
.sticky-table th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* 多重黏性閾值 */
.sticky-nav {
  position: sticky;
  top: 60px;        /* 在固定頭部下方 */
  background: #f8f9fa;
}

.sticky-footer {
  position: sticky;
  bottom: 0;        /* ✅ 黏附至底部 */
  background: white;
  border-top: 1px solid #eee;
}

/* ❌ 常見陷阱：父元素 overflow hidden 會破壞黏性行為 */
.broken-sticky-parent {
  overflow: hidden; /* 這會破壞黏性行為！ */
}

.working-sticky-parent {
  overflow: visible; /* ✅ 允許黏性正常工作 */
}

實戰應用：互動式卡片疊層

讓我們結合定位技巧來創建令人印象深刻的互動式卡片疊層效果，使用絕對定位和 z-index 控制。

試著點擊卡片將它們置於前方，懸停查看縮放效果，使用控制按鈕隨機排列或重置位置！

CSS Position 最佳實踐

現在你了解了所有定位方法，讓我們探索最佳實踐以獲得最佳結果：

效能優化：

• 動畫時使用 transform 而不是改變 top/left
• 為將被動畫化的元素應用 will-change: transform
• 避免過度嵌套定位元素

無障礙考量：

• 確保固定/黏性元素不覆蓋重要內容
• 使用絕對定位時保持適當的焦點順序
• 測試螢幕閱讀器和鍵盤導航

響應式設計技巧：

• 使用百分比值和視窗單位實現靈活定位
• 考慮定位元素在不同螢幕尺寸下的行為
• 使用媒體查詢為行動裝置調整定位

避免常見陷阱：

• 忘記絕對定位元素需要已定位的父元素
• 在不理解堆疊上下文的情況下使用 z-index
• 在行動裝置上過度使用固定定位
• 未考慮絕對定位元素的內容溢出

瀏覽器相容性：

• 黏性定位在現代瀏覽器中有極好支援（95%+）
• 使用功能查詢 @supports 進行漸進增強
• 如果需要支援舊瀏覽器，考慮使用 polyfill

結論：掌握 CSS Position

CSS Position 是一個強大的工具，開啟了無數設計可能性。透過理解五種定位方法 - static、relative、absolute、fixed 和 sticky - 你可以創造出以前只有 JavaScript 才能實現的複雜版面。

關鍵重點：

• Static：預設行為，遵循文件流
• Relative：創建定位上下文，相對原始位置偏移
• Absolute：脱離流，相對祖先定位
• Fixed：始終相對視窗，完美適用於 UI 元素
• Sticky：智慧定位，在相對和固定間切換

實施定位版面時，記住始終考慮效能、無障礙和響應式行為。從簡單定位開始，逐步構建複雜的互動效果。

有了這些技術在工具包中，你已準備好創造獨特、引人入勝的網頁版面，從人群中脫穎而出！

實用定位程式碼片段

/* 🎯 完美置中（適用於任何大小的元素） */
.center-perfect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 📱 響應式固定導航 */
.responsive-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .responsive-nav {
    padding: 0.5rem;
  }
}

/* 🔄 覆層模式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 📌 徽章/通知定位 */
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* 🚀 浮動操作按鈕 */
.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #007bff;
  color: white;
  border: none;
  box-shadow: 0 4px 20px rgba(0,123,255,0.4);
  transition: transform 0.3s ease;
}

.fab:hover {
  transform: scale(1.1);
}