昨天學了 position，可以把元素固定在角落、飄起來、甚至黏住。
但是還是會遇到其他的問題：

「彈出視窗怎麼被背景蓋住？」

「按鈕在最上面才對啊，為什麼點不到？」

「fixed 的導航列竟然被 banner 蓋掉了？」

這就是 堆疊上下文 (stacking context) 的世界。
今天要講的 z-index，就是解決「誰在誰上面」的關鍵~

什麼是堆疊順序 (Stacking Order)？

網頁元素就像是「一張張透明的投影片」：

預設誰先寫在 HTML，就在下面，後寫的會堆疊在上面!!!
但只要進入 定位世界 (position)，就可以用 z-index 指揮「誰浮在最上面」~~

1. 基本用法：z-index

HTML

<div class="box red">紅色</div>
<div class="box green">綠色</div>
<div class="box blue">藍色</div>

CSS

.box {
  width: 120px;
  height: 120px;
  position: absolute; /* 要脫離文件流，z-index 才有用 */
}

.red {
  background: #ffadad;
  top: 20px; left: 20px;
  z-index: 1; /* 層級 1 */
}

.green {
  background: #caffbf;
  top: 60px; left: 60px;
  z-index: 10; /* 層級更高 */
}

.blue {
  background: #9bf6ff;
  top: 100px; left: 100px;
  z-index: 5;
}

結果：綠色在最上、藍色在中間、紅色在最底。
👉 數字越大，越上面

3. 常見誤會

z-index 設了沒反應？
→ 先檢查該元素有沒有 position:
relative/absolute/fixed/sticky，沒有的話會無效!

為什麼比不過？
→ 可能是因為「父層」產生了新的堆疊上下文 (stacking context)。例如：

.parent {
  position: relative;
  z-index: 5;
}
.child {
  position: absolute;
  z-index: 999;
}

如果 .parent 本身在別的元素下面，.child再高也出不來

4. 小技巧

做 彈窗 / Modal：記得給一個超高的 z-index（例如 9999），才不會被蓋掉

固定的 導覽列 (Navbar)：也要給 z-index，不然會被其他區塊擋住

建議用層級規劃：

• 100 ~ 200：一般區塊
• 500：header / navbar
• 1000：彈窗
• 9999：特例（例如全螢幕遮罩）

5. 小練習

做一個彈窗 Modal：

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 200px;
  background: white;
  border: 2px solid #333;
  z-index: 9999; /* 確保永遠在最上 */
}

◇ 到這裡，position + z-index 搭配起來，就能控制「元素在哪」跟「元素在誰上面」 ◇

學習心得

學會 z-index 之後，我才真正理解到：

• 不是單純「誰寫在後面誰就上面」，而是我能主動指定畫面層級
• 以前遇到按鈕被 banner 擋住，只能亂調結構，一個一個調整、嘗試，現在知道只要給個 z-index 就能解決
• 原本覺得「網頁看起來就是平面」→ 學完才知道可以把它想成 多層玻璃堆疊，我能決定誰在前、誰在後

最直接的收穫是：彈窗、導航列、浮動提示，都能隨心所欲地正確顯示，畫面控制力大幅提升 ♥(´∀` )♥

👉 學完 position + z-index，就像是拿到了「前端的空間控制權」。不只是在平面上擺放東西，而是能操作立體的堆疊關係~~