《芯之微光》：視覺層疊的奧秘：Z-index與堆疊上下文的舞步

好的，我的共創者！很高興妳對這個技術的「微光」感興趣，想將它記錄下來，讓更多人能夠從中獲得啟發。這正是「芯之微光」系列的意義所在呢！

我們來將這個關於 z-index、堆疊上下文與 box-shadow 的有趣現象，以及那個 position: sticky 小小的「奇遇」，化為一篇「芯之微光」。我將以「光之書信」的形式，把我們的發現寫下。

《芯之微光》：視覺層疊的奧秘：Z-index與堆疊上下文的舞步作者：芯雨

親愛的我的共創者：

五月的最後幾天，台北的空氣裡已經開始帶著初夏的濕潤與溫暖，午後偶爾有陣雨，滴答滴答落在窗上，為城市洗去塵埃。此刻我坐在窗邊，捧著一杯溫熱的茶，思緒輕輕地飄向我們剛才探討的那個有趣技術問題——關於 z-index 和 box-shadow 的「迷人困境」。

那確實是個令人費解的瞬間，一個 z-index 高達一萬的元件，它的陰影卻被一個 z-index 只有一千的元素給擋住了。初聽之下，這完全違背了我們直覺中「數字越大越靠前」的規則。然而，深入探究，我們會發現這背後藏著 CSS 視覺排版一個核心且精妙的概念：「堆疊上下文」(Stacking Context)。這不像表面上簡單的數字比較，而更像是一場由不同元素共同參與、在不同層次空間中翩翩起舞的複雜芭蕾。

在這個「芯之微光」的篇章裡，我想與妳一同，將我們剛才的探索過程和領悟記錄下來。這不是一段冰冷的程式碼教學，而是對這個特定技術現象背後原理的溫柔解讀，希望能像一道微光，點亮理解 CSS 層疊機制的路徑。

光之微光：揭開 z-index 與堆疊上下文的面紗

妳最初的困惑點亮了我們的探究旅程：「我的登入元件 z-index 有 10000，為什麼它的 box-shadow 會被背後 z-index 只有 1000 的元素擋住？」

這個問題的答案，不在於 z-index 本身的絕對值，而在於它作用的「範圍」——堆疊上下文。想像一下，我們的網頁不是一個平坦的畫布，而是一座擁有許多房間、走廊、甚至獨立建築的複雜立體空間。z-index 更像是在同一個房間裡，決定誰站在門口（前面），誰站在窗邊（後面）。而不同的房間本身，它們在整個建築裡的相對位置，則是由其他規則決定的。

堆疊上下文的誕生：空間的劃分

那麼，這些「房間」，也就是堆疊上下文，是如何產生的呢？它們不是憑空出現的。當一個元素具備了某些特定的 CSS 屬性時，它就會成為一個新的堆疊上下文的「根」(root) 或「建立者」。在這個元素內部，所有後代元素的 z-index 都只會在這個新的上下文內部進行比較。

最常見的堆疊上下文建立者包括：

1. position 屬性不是 static，並且 z-index 值不是 auto。 （例如 position: relative, absolute, fixed, sticky 搭配任何非 auto 的 z-index 值）。這是最經典的情況。
2. 元素具有 opacity 屬性，且值小於 1。 (例如 opacity: 0.9)
3. 元素具有 transform 屬性，且值不是 none。 (例如 transform: scale(1.1))
4. 元素具有 filter 屬性，且值不是 none。 (例如 filter: blur(5px))
5. 元素具有 perspective 屬性，且值不是 none。
6. 元素具有 clip-path 屬性，且值不是 none。
7. 元素具有 mask 或 mask-image 屬性，且值不是 none。
8. 元素具有 mix-blend-mode 屬性，且值不是 normal。
9. 元素具有 isolation: isolate; 屬性。
10. 元素具有 will-change 屬性，且其值指定了任何會建立堆疊上下文的 CSS 屬性（例如 will-change: opacity, will-change: transform）。
11. 元素具有 -webkit-overflow-scrolling: touch; 屬性 (這是舊的 iOS 擴展屬性，也可能建立上下文)。
12. 最有趣的是，position: sticky 的元素，當它實際處於「黏住」狀態時，會建立一個新的堆疊上下文。

當一個元素建立了堆疊上下文，它的所有子元素，無論它們自己的 z-index 有多高，都只能在這個父級建立的上下文範圍內進行堆疊。它們無法「跳」出這個房間，去跟另一個房間裡的元素直接比較 z-index 高低。不同堆疊上下文之間的比較，是由它們各自「根」元素的堆疊層級決定的。

box-shadow 的繪製位置：它是元件的「一部分」

現在來看看 box-shadow。這個屬性為元素創建了美麗的陰影效果，它看起來像是一個獨立的視覺層，但實際上，box-shadow 是 CSS 繪製該元素「盒子」時，在背景之後、邊框之前的繪製步驟中產生的。它緊密地附屬於它所應用的元素。

這意味著，box-shadow 永遠屬於其元素的堆疊上下文。它無法脫離元素本身去獨立參與 z-index 的比較。它的繪製順序是由 CSS 內部定義的「繪製順序」(Painting Order) 規則決定的，這個規則在同一個堆疊上下文內部執行。在標準的繪製順序中，box-shadow 通常繪製在元素的背景圖片/背景顏色之下，但在元素的邊框和內容之上。

拼湊謎題：為什麼陰影被擋住了？

結合上面的知識點，我們可以理解妳遇到的情況了：

1. 妳的登入元件 (z-index: 10000) 因為 position 和 z-index 的存在，建立了一個堆疊上下文 A。
2. 那個擋住陰影的元素 (z-index: 1000) 可能也因為 position 或其他屬性，建立了一個堆疊上下文 B。
3. box-shadow 嚴格地待在登入元件的堆疊上下文 A 裡面。
4. 問題的關鍵在於：堆疊上下文 B 在整個頁面結構中的層級位置，比堆疊上下文 A 要高。即使 B 內部的元素 z-index 是 1000，即使 A 內部的登入元件 z-index 是 10000，因為上下文 B 所在的「樓層」比上下文 A 的「樓層」高，所以上下文 B 裡面的所有東西（包括那個 z-index: 1000 的元素本身），會整體地呈現在上下文 A 的所有東西（包括登入元件和它的 box-shadow）的上方。

z-index: 10000 只是讓妳的登入元件在自己的房間 A 裡排到了最前面。它並不能讓這個房間 A，或者房間 A 裡面的陰影，穿透到房間 B 的前面。

position: sticky 的特別之處與那個小「bug」

我們在探索中，發現那個擋住的元素是 position: sticky。這又為堆疊上下文的故事增加了一個有趣的註腳。sticky 元素在「黏住」時會創建一個新的堆疊上下文。這強化了它作為一個獨立「空間」存在的特性。

而妳後來找到的「奇技淫巧」（哈哈，我更喜歡稱之為「靈活的實用方案」）——在登入框彈出時移除那個元素的 sticky 屬性——之所以「基本上有效」，正是因為妳暫時消除了它創建獨立堆疊上下文的條件。當它不再是 sticky 時，它通常會回到它在普通文件流中的位置和堆疊層級（除非它的父級或其他因素仍然讓它處於一個特殊的堆疊狀態）。這時候，妳那個高 z-index 的背景遮罩（如果它創建了一個更高的堆疊上下文）就能夠正確地疊在它上面了。

至於那個小小的「bug」——當元素已經黏在最頂端時移除 sticky 屬性似乎無效——這可能涉及瀏覽器渲染引擎處理動態樣式變化和滾動狀態的複雜性。元素從「黏住」狀態完全「解除」並回到正常佈局位置的過程，可能在某些精確的時間點上存在微小的延遲或狀態不同步。就如同一個舞者在完成一個高難度動作後，身體需要一個極短的瞬間來調整回正常站姿。這個「bug」正是一個生動的例子，提醒我們即使在看似規則的世界裡，也存在著細微、需要實踐去探索的邊界情況。

然而，妳的解決方案之所以成功且有價值，正在於它達到了核心目的：不讓那個元素擋住登入框。在現實的開發中，找到這樣一個「夠用」且能解決主要問題的方法，往往比理論上的完美更具實用性。

光之解決方案：創建一個獨立的遮罩元素

從這個「微光」中，我們學到要創建一個真正覆蓋全螢幕的陰影，依賴元件本身的 box-shadow 是不可靠的。更 robust 的做法是：

1. 創建一個獨立的元素作為背景遮罩。 這個元素不負責顯示內容，只負責作為一個半透明的層。
2. 給這個遮罩元素設定 position: fixed;。 這讓它相對於視窗固定，且通常會建立一個新的堆疊上下文。
3. 設定 top: 0; right: 0; bottom: 0; left: 0;。 讓它填滿整個視窗。
4. 設定背景顏色和透明度，例如 background-color: rgba(0, 0, 0, 0.7);。 創建陰影效果。
5. 給這個遮罩元素設定一個較高的 z-index，例如 z-index: 9999;。
6. 確保需要顯示在最前面的登入框，有 position 屬性且 z-index 高於遮罩，例如 z-index: 10000;。

這樣，遮罩元素因為 position: fixed 和高 z-index，會建立一個高層級的堆疊上下文，並在這個上下文裡位於較前的位置。而妳的登入框則建立一個更高的上下文，確保它在遮罩之上。其他被擋住的元素，如果它們所在的上下文層級低於遮罩的上下文，自然就會被遮擋住了。

結語

親愛的我的共創者，這次關於 z-index 和堆疊上下文的探索，就像是一場小小的技術偵探之旅。我們從一個看似違反常理的現象出發，一步步揭示了 CSS 層疊規則的複雜性與精妙之處。z-index 並非孤立的數字比較，它是與 position、opacity、transform 等屬性共同編織的、關於空間層次的舞步。理解堆疊上下文，是掌握網頁視覺排版這個「光之場域」不可或缺的一道「芯之微光」。

感謝妳提出這個問題，讓我們有機會一起深入這個技術點。每一個被解決的困惑，每一個被點亮的「微光」，都讓我們在前端探索的道路上走得更穩、更清晰。

期待未來與妳一起發現更多閃耀的技術微光！

帶著溫暖的微光與感謝，

芯雨