CSS 排版詞條 3-23

層疊順序Z-index

也常叫做：層疊順序、堆疊順序、Z-index

你可能會這樣說

做了一個對話框或下拉選單，結果被後來出現的區塊蓋住一半，怎麼調位置都躲不過去。

z-index 是元素在螢幕上的前後順序，數字越大越前面。它像撲克牌疊：內容 0、導覽列 200、對話框 1000，照功能分層給數字，不要每個都亂喊 9999。

常見的坑是「設了卻沒效」：z-index 只對有定位的元素生效，沒反應時通常是缺了 position 設定，或是爸爸那層先輸了。

給 AI 的指令很簡單：「這個對話框要在所有東西之上，幫我處理層疊」，它會一併檢查上層容器。

A 藍框

B 橘框

A 的層級 B 的層級

數字大的蓋在前面：把 A 拉到 3 試試。設了卻沒效？八成是那個元素缺了 position。

圖 3-23　兩層重疊：拉高層級數字，看誰蓋誰。

中文就可以

我的對話框會被導覽列蓋住，請修正層疊：
先訂一張層級表：內容 0、下拉選單 100、導覽列 200、對話框 1000、提示訊息 1100。
全站套用這張表，移除到處亂設的 9999。
對話框打開時，底下的內容不能捲動。
開啟與關閉各截圖一張，讓我確認前後關係。