在過去幾天的文章中，我們學習了Flexbox與Grid兩大現代佈局利器。它們非常擅長處理元件之間並排、對齊的「排版流」幾何關係。

但在實際網頁設計中，我們經常會遇到一些「特立獨行」的幾何需求，例如永遠黏在網頁頂端的導覽列、右下角的「回到頂端」按鈕，或者是覆蓋在圖片右上角的「特價」標籤。

這些不跟隨一般排版流、需要「指定座標」的元件，我們就必須依賴CSS的 position（定位屬性） 來精準調配。

什麼是CSS排版流

在認識定位之前，要先知道網頁預設的 標準排版流（Normal Flow）：

• 塊級元素（如div、h1）預設會由上而下排列，佔滿整行。
• 行內元素（如span、a）預設會由左而右排列，空間不夠才換行。

而position屬性，就是用來打破或修正這個標準排版流的手段，搭配使用的幾何座標屬性有四個：top、bottom、left、right。

三大核心定位屬性解析

1. position: relative;（相對定位）

• 幾何基準：以元件原本在標準排版流中的預設位置為起點。
• 幾何表現：當我們設定 top: 20px; left: 20px; 時，元件會從原本的位置向下一移20px、向右移20px。
• 最重要特性：它不會釋放原本佔據的空間，雖然元件位移了，但它原本的坑還在，後面的元件不會遞補上來。在實務上，它最常被拿來當作「絕對定位的父容器基準」。

2. position: absolute;（絕對定位）

• 幾何基準：以離自己最近的**「非static（也就是有設定 relative、absolute 或 fixed）」的父層或祖先級元件**為起點，如果往上找都沒有，就會以整個網頁（HTML / Body）為起點。
• 幾何表現：一宣告absolute，元件就會立刻脫離標準排版流（像幽靈一樣浮起來），原本佔據的網頁空間會被立刻釋放，後方的元件會直接遞補上來。
• 黃金組合：實務上最常用子元件使用 absolute+父容器使用relative，這樣不論父容器搬到哪，子元件都會精準鎖定在父容器的相對座標裡。

3. position: fixed;（固定定位）

• 幾何基準：永遠以**瀏覽器的可視視窗（Viewport）**為起點。
• 幾何表現：同樣會完全脫離標準排版流，不管你如何滾動網頁捲軸，這個元件都會像釘子一樣，死死地釘在畫面的指定幾何座標上，常見於網頁頂端導覽列、側邊聊天視窗或置頂按鈕。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day18 Position 定義網頁元素座標</title>
    <style>
        body {
            margin: 0;
            font-family: sans-serif;
            background-color: #f4f6f7;
            height: 2000px; /* 故意把網頁撐高，方便測試 Fixed 滾動效果 */
            padding-top: 80px; /* 預留給固定導覽列的空間 */
        }
        /* 固定定位：導覽列 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: #2c3e50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1000; /* 確保永遠在最上層 */
        }
        .main-content {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        /* 相對定位與絕對定位的黃金組合 */
        .card-parent {
            position: relative; /* 作為子元件的幾何錨點 */
            width: 100%;
            height: 250px;
            background-color: #ede6e6;
            border-radius: 8px;
            margin-bottom: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 絕對定位的子標籤 */
        .badge-child {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #e74c3c;
            color: white;
            padding: 6px 12px;
            font-size: 0.85rem;
            font-weight: bold;
            border-radius: 4px;
        }
        /* 相對定位的微調 */
        .box-relative {
            position: relative;
            top: -15px; /* 向上微調 15px */
            left: 20px;  /* 向右微調 20px */
            background-color: #34495e;
            color: white;
            padding: 15px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 固定在頂端的導覽列 -->
    <div class="navbar">
        <h3>我是固定導覽列 (position: fixed) - 滾動網頁看看，我不會動！</h3>
    </div>
    <div class="main-content">
        <h2>1. 絕對定位與相對定位組合 (子絕父相)</h2>
        <div class="card-parent">
            <h3>商品卡片（父容器 relative）</h3>
            <!-- 絕對定位標籤 -->
            <div class="badge-child">HOT 特價中</div>
        </div>
        <h2>2. 相對定位的自體微調 (position: relative)</h2>
        <p>下方區塊相對於原本的位置，向上移動了 15px，向右移動了 20px：</p>
        <div class="box-relative">
            我是相對定位區塊，我的位移不會影響其他元件的排版位置。
        </div>
    </div>
</body>
</html>

幾何表現解析

當你運行這段程式碼時，可以觀察以下三個幾何細節：

1. fixed 永不動搖：當你向下滑動滾動條時，深藍色的 .navbar 始終貼緊瀏覽器最上方（top: 0），不受捲軸影響。
2. absolute 完美依附：紅色的 .badge-child 完美定格在灰色卡片的右上角。這是因為它的父層卡片設有 relative，為它框出了專屬的幾何坐標系。
3. relative 溫和位移：.box-relative 產生了位移，但它上下的文字與元件完全沒有被它推開，證明它在標準流中的「原位」空間依然被保留著。

總結

今天我們認識了控制網頁三維空間的定位：position屬性。

• 想要微調元件且保留原位空間用relative。
• 想要擺脫束縛、在某個容器內自由定位用absolute。
• 想要無視網頁滾動、永遠霸佔視窗特定角落用fixed。

明天（Day 19），我們將結合這幾天學到的所有佈局與定位技巧，跨入現代網頁開發最重要的門檻：響應式網頁設計（RWD，Responsive Web Design），去嘗試如何讓一個網頁在手機與電腦螢幕上，自動變換出完全不同的樣貌，明天見。