揭示Webkit 過濾器中堆疊順序改變的原因

在Web 開發中，維持所需的元素堆疊順序通常至關重要。然而，某些行為可能會破壞這個秩序，讓開發人員感到困惑。將 Webkit 濾鏡套用至影像時就會出現這樣的一個實例。

將滑鼠懸停在套用了 Webkit 濾鏡的影像上時，堆疊順序可能會莫名其妙地改變。這種令人費解的現像一直是許多猜測和沮喪的話題。

幸運的是，答案就在 CSS 規範領域。當為 Webkit Filter 屬性指派一個非 none 的值時，它會建立一個堆疊上下文。這個概念在 CSS 規範中定義，規定相關元素成為其他元素的容器，並在視覺層次結構中建立一個單獨的層。

根據規範：

"A計算出的值非空會導致創建堆疊上下文，其方式與CSS 不透明度相同。」

這意味著將Webkit 過濾器應用於影像會建立一個新的堆疊上下文，該上下文會覆蓋現有的堆疊順序並將過濾後的影像放置在其他元素之上。

了解此底層機制使開發人員能夠解決堆疊順序問題，而無需訴諸 z 索引，因為 z 索引可能會破壞頁面上的其他元素。