CSS 定位（Position）的五種方式

1. static（靜態定位，預設值）

特性：

  • static 是 HTML 預設的定位方式，元素會按照正常的文檔流排列。
  • top、left、right、bottom 對 static 無效。

📌 應用場景：

  • 大部分普通元素，例如 <p>、<div>，不需要特別設定 position，一般都保持 static。

    • CSS

    div {
    position: static; /* 預設值 */
    top: 50px;  /* 無效 */
    left: 100px; /* 無效 */
}

    2. relative（相對定位）

    特性：

    • relative 相對於自己原本的位置進行偏移，不會脫離正常文檔流，原本的位置仍然保留。
    • top、left、right、bottom 可用來調整位置。

    📌 應用場景：

    1. 微調元素位置（但不影響其他元素）。
    2. 作為 absolute 內部的參考點。

    CSS

    .relative-box {
    position: relative;
    top: 20px; /* 向下移動 20px */
    left: 30px; /* 向右移動 30px */
}

    ✅ 注意： 相對定位會保留元素原本的空間，不影響其他元素！

    3. absolute（絕對定位）

    特性：

    • absolute 完全脫離文檔流，不占據原來的位置。
    • 相對於最近的 relative / absolute / fixed 父級進行定位，若無則相對於 body。

    📌 應用場景：

    1. 製作彈出視窗、浮動元件。
    2. 卡片疊加效果。
    3. 對 relative 容器內的元素進行精準定位。

    CSS

    .container {
    position: relative; /* 設為參考點 */
    width: 500px;
    height: 300px;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
}

    ✅ 注意： 如果 .absolute-box 沒有 relative 父級，它會參考 body！

    4. fixed（固定定位）

    特性：

    • fixed 完全脫離文檔流，不會影響其他元素。
    • 相對於視窗（viewport）固定，不會隨滾動而變化。

    📌 應用場景：

    1. 製作固定導覽列。
    2. 回到頂部按鈕。
    3. 浮動聊天按鈕。

    CSS

    .fixed-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: black;
    color: white;
}

    ✅ 注意： 滾動網頁時，.fixed-box 仍然固定在頂部！

    5. sticky（黏性定位）

    特性：

    • sticky 在超過特定滾動位置時，變成 fixed，否則像 relative 一樣。
    • 需要指定 top / left / right / bottom，否則不會生效。
    • 父容器不能 overflow: hidden;，否則 sticky 失效！

    📌 應用場景：

    1. 製作表格的固定標題。
    2. 滾動時顯示的導航欄。

    CSS

    .sticky-box {
    position: sticky;
    top: 10px;
    background-color: yellow;
}

    ✅ 注意： 當滾動超過 10px，元素就會固定在 10px 的位置！

    定位方式的比較

    定位方式 脫離文檔流 相對於誰 影響其他元素 主要應用
    static ❌ 否 無 ✅ 會影響 預設排列
    relative ❌ 否 自己原本的位置 ✅ 會影響 微調、父級參考點
    absolute ✅ 是 最近的 relative/absolute/fixed 父級 ❌ 不影響 彈窗、浮動區塊
    fixed ✅ 是 視窗（viewport） ❌ 不影響 固定導覽列、回頂部按鈕
    sticky ❌/✅ 部分脫離 最近的可滾動祖先 ✅ 會影響 表頭固定、導航欄