TailwindCSS 定位系統：position、inset、z-index、sticky 完整指南 | TailwindCSS 完整教學

在 TailwindCSS 裡，定位系統（Positioning） 是讓元素「脫離正常文件流」、精準釘在畫面任意位置的關鍵工具——只要用 relative、absolute、fixed、sticky 決定定位模式，再用 top／right／bottom／left（或簡寫 inset-*）指定偏移、z-* 控制層疊順序，就能一組 utility 做出黏性導覽列、卡片徽章、下拉選單、彈窗遮罩這些過去得靠一整段 CSS 才能完成的疊層 UI。這是 TailwindCSS 完整教學 系列的第十一篇，我們會把 position 五種模式、inset 偏移、負值、z-index 與堆疊脈絡、以及 sticky 實務一次講透，並以 v4 為預設、標註與 v3 的差異。

前言

定位（Positioning） 是 CSS 用來控制元素「該擺在哪裡」的機制。前面幾篇學的 Flexbox 與 Grid 處理的是「正常文件流（normal flow）」裡的排列——元素一個接一個、規規矩矩地佔據空間、互相推擠。但真實世界的介面常常需要打破這個規則：一個「NEW」徽章要疊在商品圖片的右上角、一條導覽列要在捲動時黏在螢幕頂端、一個彈窗要蓋住整個畫面並置中、一個下拉選單要浮在按鈕正下方而不撐開版面。這些「脫離正常流、疊在別人上面」的需求，就是定位系統登場的時刻。

CSS 的定位由一個核心屬性 position 搭配 top／right／bottom／left 這組偏移量、以及 z-index 這個層疊控制共同完成。而 TailwindCSS 把整套規格一對一包裝成好記的 utility：position: relative 就是 relative、position: absolute 就是 absolute，top: 0 就是 top-0，z-index: 50 就是 z-50，四邊歸零的 top:0; right:0; bottom:0; left:0 更是縮寫成一顆 inset-0。你不必再手寫這些屬性，用組合 class 就能表達完整的定位意圖。

用一個現實世界的類比來理解五種定位模式：想像一面公佈欄。 static 是預設狀態——每張紙照規矩由上往下貼、互不重疊（這就是正常文件流）。relative 是「把某張紙從它原本該在的位置稍微挪開一點」，但它原本的空位還留著、別的紙不會補上來。absolute 是「拿一根圖釘，把紙釘在公佈欄框（最近的定位祖先）的某個座標上」，這張紙從此不佔正常空間、其他紙當它不存在。fixed 更霸道——不管公佈欄怎麼捲動，這張紙用強力磁鐵吸在你的「螢幕玻璃」上，永遠不動。sticky 則是混合體：紙平常乖乖待在文件流裡，但當你往下捲、它即將被推出視野時，它會「黏」在你指定的邊界（例如頂端），跟著你直到它的父容器整個離開為止。而 z-index 就像每張紙的「疊放層數」——數字越大越靠上、蓋住數字小的。

本篇你將學到：

• 五種定位模式：static／relative／absolute／fixed／sticky 各自相對誰定位、會不會脫離文件流、會不會隨捲動移動
• 偏移量控制：top-*／right-*／bottom-*／left-*、簡寫 inset-*／inset-x-*／inset-y-*、v4 的邏輯屬性 start-*／end-*，以及負值 -top-2
• 層疊順序：z-*（z-0～z-50、-z-10）如何運作，以及最容易踩雷的堆疊脈絡（stacking context）
• 實務技巧：sticky 黏性導覽、absolute 徽章與下拉選單、fixed 彈窗遮罩、以及 absolute inset-0 flex 的完美置中招式

本系列以 TailwindCSS v4 為預設版本，本篇會明確標註每一項與 v3 的差異。

核心概念

五種 position 模式全景

學定位的第一步，是把五種 position 模式的三個關鍵屬性——「相對誰定位」「是否脫離文件流」「是否隨捲動移動」——一次看清楚。下面這張表是整篇文章的地圖：

這張表有兩個最需要記住的重點。第一，只有 relative、absolute、fixed、sticky 這四種「非 static」模式，top／right／bottom／left 才有作用——對一個 static 元素寫 top-4 完全無效，這是新手常見的困惑來源。第二，relative 有個隱藏的重要角色：它會成為子孫 absolute 元素的「定位錨點」。 這是定位系統最核心的搭配——「父層 relative、子層 absolute」——後面幾乎所有範例都圍繞它展開。

relative 與 absolute 的黃金搭配

為什麼 relative 這麼重要？因為 absolute 元素是相對「最近的、position 不為 static 的祖先」定位的。如果你在一個 absolute 元素往上找，一路都沒有任何祖先設過 relative／absolute／fixed／sticky，它就會相對整個頁面（初始包含塊）定位——這幾乎不是你要的結果，元素會跑到頁面的角落而非你預期的容器裡。

所以標準做法是：在你希望作為「座標系原點」的那個容器上加 relative，再讓要疊放的元素用 absolute 加偏移。 例如要把徽章釘在卡片右上角，就在卡片外層寫 relative、在徽章寫 absolute top-0 right-0。徽章便相對卡片（而非整個頁面）定位到它的右上角：

relative 父層 + absolute 子層（座標系原點）

┌─ relative 容器 ────────────┐  ← 這裡加 relative，成為錨點
│                    ┌─────┐ │
│                    │ NEW │ │  ← absolute top-0 right-0
│                    └─────┘ │     釘在容器右上角
│   卡片內容...              │
│                            │
└────────────────────────────┘

若父層沒加 relative：
absolute 會往上找，最後相對整個「頁面」定位 → 徽章跑到頁面角落 ❌

記住這個口訣：看到 absolute，先問「它的定位錨點是誰？」——通常你需要在它想要對齊的容器上補一個 relative。 這是避開定位錯誤的第一道防線。

inset 偏移量：top/right/bottom/left 與簡寫

決定了定位模式，接著要指定「偏移多少」。Tailwind 提供完整的偏移工具，並貼心地為常見組合提供簡寫：

這些偏移量的數值刻度和間距系統（spacing scale）一致：top-4 是 1rem（16px）、top-8 是 2rem，同時支援分數與特殊值——inset-1/2 是 50%、inset-full 是 100%、inset-0 是四邊歸零、inset-auto 是 auto、top-px 是 1px。其中最好用的就是 inset-0：它等於 top-0 right-0 bottom-0 left-0 四顆 class，讓一個 absolute 元素撐滿整個定位父層，是製作全覆蓋遮罩、背景圖層的必備寫法——後面的彈窗與置中範例都會用到它。

inset-* 簡寫對照

inset-0            inset-x-4          inset-y-0
（四邊貼齊）        （左右各 1rem）     （上下貼齊、左右 auto）
┌──────────┐       ┌──────────┐       ┌──────────┐
│▓▓▓▓▓▓▓▓▓▓│       │  ▓▓▓▓▓▓  │       │▓        ▓│
│▓▓▓▓▓▓▓▓▓▓│       │  ▓▓▓▓▓▓  │       │▓        ▓│
│▓▓▓▓▓▓▓▓▓▓│       │  ▓▓▓▓▓▓  │       │▓        ▓│
└──────────┘       └──────────┘       └──────────┘

v4 差異標註：start-*／end-* 是 v4 完整加入的邏輯屬性（logical properties）版本，對應 CSS 的 inset-inline-start／inset-inline-end。它們是 left-*／right-* 的 RTL（右到左書寫）友善版本——在中文、英文這種左到右的語言中 start-* 等同 left-*，但在阿拉伯文等 RTL 語言中會自動翻轉到右邊。若你的網站需要支援多語系與 RTL，優先用 start-*／end-* 而非寫死的 left-*／right-*。

負值偏移：讓元素「突出」邊界

偏移量可以是負的，只要在 class 前面加一個減號：-top-2、-right-2、-inset-4。負值的意義是「往反方向推」——-top-2 讓元素往上超出 0.5rem、-right-2 往右超出。這在製作「突出邊界」的效果時非常實用，例如購物車圖示右上角那顆略微超出圖示範圍的數量小圓點：

<!-- 購物車圖示 + 突出右上角的數量徽章 -->
<button class="relative p-2">
  <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.3 2.3M17 13l2 2M9 19a1 1 0 100 2 1 1 0 000-2zm8 0a1 1 0 100 2 1 1 0 000-2z"/>
  </svg>
  <!-- 徽章用負值往右上角突出，蓋在圖示邊緣外 -->
  <span class="absolute -top-1 -right-1 z-10 flex items-center justify-center
               w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full">
    3
  </span>
</button>

這裡 absolute -top-1 -right-1 讓小圓點的位置從按鈕右上角再往外突出一點點，做出常見的「通知數量」視覺——這種「稍微超出容器」的細節，正是負值偏移的招牌用途。

z-index 與堆疊脈絡：定位系統最容易踩的雷

當多個元素在同一個位置重疊時，「誰蓋住誰」由 z-index 決定——數字越大越靠上。Tailwind 提供一組預設層級，而且已經為常見 UI 場景規劃好慣例，直接照用就能避免混亂：

v4 差異標註：負值 z-index（如 -z-10）在 v4 已正式內建；v3 時代要達成負層級得寫任意值 z-[-10]。此外若需要超出預設刻度的層級，任意值 z-[100]、z-[9999] 在兩個版本都可用。

但 z-index 有一個惡名昭彰、幾乎每個開發者都被咬過的陷阱：堆疊脈絡（stacking context）。核心規則是——z-index 只能在「同一個堆疊脈絡內」比較大小。 一旦某個祖先元素建立了新的堆疊脈絡，它的所有子孫就被「封」在那個脈絡的層級裡，無論子孫的 z-index 設多大，都無法跨出去和外層的元素比較。這就是為什麼你常常遇到「我明明設了 z-[9999]，怎麼還是被一個 z-10 的東西蓋住？」的靈異現象。

問題在於，很多你想不到的 CSS 屬性都會「隱性」建立新的堆疊脈絡：

會建立新堆疊脈絡的常見情況（Tailwind 對照）
───────────────────────────────────────────
1. position 非 static + z-index 非 auto   → relative/absolute + z-10 等
2. opacity < 1                            → opacity-90
3. transform 非 none                      → scale-105、translate-x-2、rotate-3
4. filter 非 none                         → blur-sm、grayscale
5. backdrop-filter 非 none                → backdrop-blur-sm
6. mix-blend-mode 非 normal               → mix-blend-multiply
7. isolation: isolate                     → isolate  ← Tailwind 專為此設計

所以當 z-index 失效時，正確的排查方向不是把數字加更大，而是往上檢查祖先鏈，看是不是某個父層加了 opacity、transform 或 backdrop-blur，偷偷建立了脈絡。而 Tailwind 的 isolate（isolation: isolate）class 正是為了「主動、受控地建立堆疊脈絡」而生——你可以在一個區塊加 isolate，把它內部的 z-index 影響範圍鎖在區塊內，不讓它污染外部，也不被外部干擾。

實作範例

理論看完，我們用幾個高頻的可執行範例把工具串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：Sticky 黏性導覽列

sticky 最經典的用途就是黏性頁首——平常待在頂端，往下捲動後「黏」在螢幕頂部不再移動：

<!-- 向下捲動後固定在頂部的黏性頁首 -->
<header class="sticky top-0 z-30 bg-white/95 backdrop-blur-sm border-b border-gray-200">
  <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-gray-900">Logo</a>
    <nav class="hidden md:flex items-center gap-8">
      <a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900">關於</a>
      <a href="/work" class="text-sm font-medium text-gray-600 hover:text-gray-900">作品</a>
    </nav>
    <a href="/contact"
       class="px-4 py-2 bg-cyan-600 text-white text-sm font-medium rounded-lg hover:bg-cyan-700">
      聯絡我們
    </a>
  </div>
</header>

這個範例的核心就三顆 class：sticky top-0 z-30。sticky 宣告黏性定位、top-0 告訴瀏覽器「黏在距頂端 0 的位置」（這個方向值不可省略，否則不會黏）、z-30 確保它捲動時蓋在正文之上。額外的 bg-white/95 backdrop-blur-sm 是製作高質感頁首的小訣竅——半透明白底加背景模糊，讓底下的內容捲過時透出一點朦朧感。要注意 sticky 不像 fixed 會脫離文件流，它平常仍佔據正常空間，只在捲到臨界點時才「黏」住，所以不會像 fixed 那樣需要另外補一塊 padding 來避免遮住內容——這正是黏性導覽比固定導覽更省心的地方。

範例二：Absolute 徽章疊加

第二個高頻場景是把徽章疊在卡片圖片的角落——這是「父 relative、子 absolute」黃金搭配的直接應用：

<!-- 商品卡片：徽章 absolute 疊加在圖片角落 -->
<div class="relative rounded-xl overflow-hidden bg-white border border-gray-200">
  <!-- NEW 徽章：釘在右上角 -->
  <span class="absolute top-3 right-3 z-10 px-2.5 py-1 bg-cyan-600 text-white
               text-xs font-bold rounded-full">
    NEW
  </span>
  <!-- 折扣徽章：釘在左上角 -->
  <span class="absolute top-3 left-3 z-10 px-2.5 py-1 bg-red-500 text-white
               text-xs font-bold rounded-full">
    -20%
  </span>

  <img src="/product.jpg" alt="商品" class="w-full h-56 object-cover">

  <div class="p-4">
    <h3 class="font-semibold text-gray-900">商品名稱</h3>
    <p class="text-gray-500 text-sm mt-1">NT$1,280</p>
  </div>
</div>

關鍵在最外層卡片的 relative——它讓內部兩個 absolute 徽章有了定位錨點，於是 top-3 right-3 是相對「卡片」的右上角、top-3 left-3 是相對卡片的左上角，而不是相對整個頁面。z-10 確保徽章疊在圖片之上。如果你拿掉卡片的 relative，徽章會往上找到頁面、直接飛到瀏覽器視窗的角落——這是初學者最常見的 bug，也是「看到 absolute 先找 relative」口訣的最佳註腳。

範例三：下拉選單（relative + absolute）

下拉選單同樣是黃金搭配，重點在讓選單浮在按鈕正下方而不撐開版面：

<!-- 相對定位的觸發區 + absolute 定位的下拉選單 -->
<div class="relative inline-block">
  <!-- 觸發按鈕 -->
  <button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700
                 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
    選項
    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>

  <!-- 下拉選單：top-full 讓它緊貼按鈕正下方 -->
  <div class="absolute top-full left-0 mt-1 z-20 w-48 bg-white rounded-xl shadow-lg
              border border-gray-200 py-1">
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">編輯</a>
    <a href="#" class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">複製</a>
    <hr class="my-1 border-gray-100">
    <a href="#" class="block px-4 py-2.5 text-sm text-red-600 hover:bg-red-50">刪除</a>
  </div>
</div>

這裡有兩個技巧值得記住。第一，外層是 relative inline-block——relative 當錨點、inline-block 讓容器寬度貼合按鈕。第二，選單用了 top-full：top-full 對應 top: 100%，意思是「從錨點的底部（100% 高度處）開始」，於是選單剛好落在按鈕的正下方；再加 mt-1 拉開一點縫隙。z-20 讓選單浮在其他內容之上。因為選單是 absolute，它不佔正常空間，所以展開時不會把下方的內容往下推——這正是下拉選單該有的行為。

範例四：Fixed 彈窗遮罩與 absolute 置中

最後這個範例把 fixed、absolute、inset-0 三者結合，做出一個全螢幕彈窗——並示範最實用的置中技巧：

<!-- 彈窗：fixed 全螢幕遮罩 + flex 置中對話框 -->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <!-- 半透明遮罩：inset-0 撐滿整個視口 -->
  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

  <!-- 對話框：relative + z-10 讓它疊在遮罩之上 -->
  <div class="relative z-10 w-full max-w-md bg-white rounded-2xl shadow-2xl p-6">
    <!-- 關閉按鈕：absolute 釘在對話框右上角 -->
    <button class="absolute top-4 right-4 p-1 rounded-lg text-gray-400
                   hover:text-gray-600 hover:bg-gray-100">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
      </svg>
    </button>

    <h2 class="text-xl font-bold text-gray-900 mb-4">確認操作</h2>
    <p class="text-gray-600 mb-6">您確定要執行此操作嗎？此操作無法撤銷。</p>

    <div class="flex justify-end gap-3">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">取消</button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">確認刪除</button>
    </div>
  </div>
</div>

這個範例濃縮了本篇所有精華。最外層 fixed inset-0 z-50 讓整個彈窗覆蓋視口、固定不隨捲動、且以 z-50 疊在所有內容最上層。置中的關鍵不是複雜的位移計算，而是直接在這個 fixed 容器上加 flex items-center justify-center——用上一篇學過的 Flexbox 讓對話框在水平與垂直方向都居中，這是現代最推薦的置中做法，比舊時代的 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 位移法乾淨太多。遮罩層用 absolute inset-0 撐滿；對話框用 relative z-10 疊在遮罩之上；關閉按鈕又是一個 absolute top-4 right-4，相對對話框（因為對話框是 relative）釘在右上角。層層嵌套，卻條理分明。

常見錯誤與最佳實踐

四個最容易踩的定位坑

坑一：對 absolute 元素忘了在父層加 relative。 這是定位系統排名第一的 bug。absolute 會相對「最近的非 static 祖先」定位，若一路往上都沒有，它就相對整個頁面——元素直接飛到瀏覽器角落。解法很簡單：在你希望作為座標原點的那個容器上補一個 relative。

<div class="relative">                          <!-- ✅ 補上 relative 當錨點 -->
  <span class="absolute top-0 right-0">徽章</span>
</div>

<div>                                            <!-- ❌ 沒有 relative -->
  <span class="absolute top-0 right-0">徽章會飛到頁面角落</span>
</div>

坑二：z-index 設很大卻蓋不過別人（堆疊脈絡陷阱）。 前面強調過：z-index 只在同一個堆疊脈絡內比較大小。當你的 z-[9999] 蓋不過某個 z-10，八成是某個祖先加了 opacity、transform、filter 或 backdrop-blur 隱性建立了新脈絡，把你的元素封在裡面。排查方向是往上找祖先，而非把數字加更大。需要主動控制範圍時用 isolate。

<!-- ❌ 父層的 opacity 建立堆疊脈絡，子層 z-[9999] 也跳不出去 -->
<div class="opacity-90">
  <div class="absolute z-[9999]">我以為我最上層，其實被封在父脈絡裡</div>
</div>

坑三：sticky 被祖先的 overflow 切斷。 sticky 相對「最近的捲動祖先」黏。如果任何祖先設了 overflow-hidden／overflow-auto／overflow-scroll（常常是為了圓角裁切而不小心加的），sticky 就會改相對那個祖先，看起來像完全不黏。診斷法：暫時移除可疑祖先的 overflow 看看是否恢復。若 overflow 是為了裁切圓角，可考慮改用 overflow-clip，它不會建立新的捲動容器。

<!-- ❌ 祖先的 overflow-hidden 切斷了 sticky -->
<div class="overflow-hidden">
  <div class="sticky top-0">永遠不會黏住</div>
</div>

坑四：sticky 忘了指定方向，或父層高度不足。 sticky 一定要搭配 top／bottom／left／right 其中一個（如 top-0），瀏覽器才知道要黏在哪。另外 sticky 只在父元素範圍內有效，若父層高度和內容差不多、沒有可以「捲過去」的空間，元素就沒機會黏。要確保父層有足夠的高度讓捲動發生。

定位系統最佳實踐清單

• 看到 absolute，先確認定位錨點：在它要對齊的容器上補 relative，別讓它意外相對整個頁面。
• 四邊全覆蓋用 inset-0，別寫四顆 class：absolute inset-0 一行就撐滿定位父層，做遮罩、背景層最簡潔。
• 置中優先用 Flexbox，不用位移法：在定位容器上加 flex items-center justify-center，比 top-1/2 -translate-1/2 乾淨可靠。
• z-index 照 Tailwind 慣例分層：dropdown 用 z-20、sticky 頁首 z-30、彈窗 z-50，別隨手用 z-[9999]。
• z-index 失效先查祖先脈絡：檢查父層有沒有 opacity／transform／backdrop-blur，需要隔離時用 isolate。
• 黏性導覽用 sticky top-0 z-30：記得指定方向值、確認祖先沒有 overflow、加 backdrop-blur 提升質感。
• 多語系網站優先用 start-*／end-*：v4 的邏輯屬性能在 RTL 語言自動翻轉，比寫死 left-*／right-* 更穩健。

小結

這是 TailwindCSS 完整教學 系列的第十一篇。上一篇 《Grid》 我們把二維版面引擎講透——用 grid-cols-*／grid-rows-* 切出行列骨架、col-span-* 讓子項跨欄、gap-* 控制間距，還有 v4 全新的 subgrid。那些工具處理的都是「正常文件流」裡的排列；而這一篇則進入「脫離文件流」的定位世界，讓元素能精準疊在畫面任意位置。回顧幾個重點：

• 五種定位模式是地圖：static（預設、偏移無效）、relative（微調偏移＋當 absolute 錨點）、absolute（相對定位祖先、脫離流）、fixed（相對視口、不隨捲動）、sticky（到臨界點才黏）。
• 父 relative、子 absolute 是黃金搭配：在座標原點容器上加 relative，是避開定位 bug 的第一道防線。
• inset-* 是偏移簡寫：inset-0 四邊歸零撐滿、inset-x-*／inset-y-* 分軸、負值 -top-2 做突出效果，v4 新增 RTL 友善的 start-*／end-*。
• z-index 與堆疊脈絡是最大的雷：z-* 只在同一脈絡內比較，opacity／transform／backdrop-blur 會隱性建立脈絡，失效時往上查祖先、用 isolate 主動控制。
• 實務招式：sticky top-0 z-30 做黏性導覽、absolute + relative 做徽章與下拉、fixed inset-0 flex items-center justify-center 做彈窗置中。

掌握了 Flexbox、Grid 與定位系統，你已經能精準掌控元素在畫面上的排列與層疊。但一個賞心悅目的介面，光有位置還不夠——元素之間要有恰到好處的「呼吸感」，內距與外距的拿捏是視覺質感的分水嶺。下一篇 《間距系統》，我們會把 p-*（padding）、m-*（margin）、space-x-*／space-y-*、以及 gap 這些控制間距的 utility 一次講透，看 Tailwind 如何用一套一致的 spacing scale，讓你的版面從「能看」進化到「耐看」。