在前端開發中，Stacking Context（堆疊上下文）決定了 HTML 元素在 Z 軸上的渲染順序。理解如何建立 Stacking Context 對於控制頁面元素的層疊關係至關重要，尤其是處理複雜的佈局和使用 z-index 時。
以下幾種方式可以建立一個新的 Stacking Context：
-
HTML 根元素 (
<html>): 根元素<html>始終會建立一個 Stacking Context。這是所有其他 Stacking Context 的根。 -
定位元素 (
position) +z-index值不為auto: 當一個元素的position屬性值為relative、absolute或fixed，並且z-index的值不是auto時，會建立一個新的 Stacking Context。 需要注意的是，即使z-index: 0也會建立一個新的 Stacking Context。 -
opacity屬性值小於 1: 設定元素的透明度（opacity）小於 1（例如opacity: 0.5）會建立一個新的 Stacking Context。 -
transform屬性值不為none: 使用任何 3D 變換函式（例如transform: rotate(3deg)或transform: translateZ(1px)）都會建立一個新的 Stacking Context。即使是 2D 變換，只要值不是none，也會建立 Stacking Context。 -
filter屬性值不為none: 應用濾鏡效果（例如filter: blur(5px)）會建立一個新的 Stacking Context。 -
isolation: isolate: 這個 CSS 屬性會強制建立一個新的 Stacking Context，可以用來避免父元素的樣式影響子元素，或者防止子元素影響父元素的堆疊順序。 -
mix-blend-mode屬性值不為normal: 設定混合模式（例如mix-blend-mode: multiply）會建立一個新的 Stacking Context。 -
will-change屬性指定了opacity、transform、filter等屬性: 使用will-change屬性並指定了會建立 Stacking Context 的屬性（例如will-change: opacity），瀏覽器會預先為元素建立一個 Stacking Context，以最佳化效能。即使這些屬性的實際值沒有改變，也會建立 Stacking Context。 -
contain屬性包含layout、paint或strict: 使用contain: layout、contain: paint或contain: strict會建立一個新的 Stacking Context。contain屬性主要用於最佳化渲染效能。 -
perspective屬性值不為none: 設定透視值（例如perspective: 100px）會為該元素的子元素建立一個新的 Stacking Context。 注意，是為子元素建立，而不是該元素本身。 -
clip-path屬性值不為none: 使用clip-path屬性裁剪元素會建立一個新的 Stacking Context。 -
backdrop-filter屬性值不為none: 設定背景濾鏡效果（例如backdrop-filter: blur(5px)）會建立一個新的 Stacking Context.
理解這些規則，並結合 z-index 的使用，可以精確地控制元素在頁面上的堆疊順序，避免出現渲染錯誤。 記住，z-index 只在同一個 Stacking Context 內有效。 如果一個元素的 z-index 設定很高，但它在一個 Stacking Context 中，而另一個元素在一個不同的 Stacking Context 中，z-index 的值可能並不會像預期那樣生效。 需要仔細分析頁面的 Stacking Context 層級關係。