新手指南：理解 CSS Stacking Context

更新日期： 2024 年 9 月 14 日

在設計網頁時，可能會遇到元素重疊的情況。

為了正確控制這些重疊元素的顯示順序，了解 CSS 中的「Stacking Context」（堆疊上下文）是非常重要的。

這篇文章將幫助你理解，什麼是 Stacking Context，以及如何使用它來控制元素的層次關係。

什麼是 Stacking Context？

Stacking Context 是一個由 CSS 屬性或特定條件，創建的層次上下文。

它決定了元素及其子元素在 Z 軸上的顯示順序。

換句話說，當元素重疊時，Stacking Context 會決定哪個元素顯示在前面，哪個元素顯示在後面。

層次的概念

在網頁中，元素通常是按照 DOM 結構從上到下進行渲染的。

然而，當你使用 z-index 屬性時，元素可以在 Z 軸上進行排列，即控制它們的前後顯示順序。

但並非所有的元素都能相互影響，只有屬於同一個 Stacking Context 的元素，它們的 z-index 才能比較。

如果它們屬於不同的 Stacking Context，即使 z-index 值不同，也無法影響彼此。

如何創建 Stacking Context？

Stacking Context 是由特定的 CSS 屬性或條件觸發創建的。

以下是一些常見創建 Stacking Context 的方式：

position 屬性

當一個元素的 position 設置為 absolute、relative、fixed 或 sticky，並且它的 z-index 屬性不是 auto 時，會創建一個新的 Stacking Context。

.container {
  position: relative;
  z-index: 10; /* 創建新的 Stacking Context */
}

opacity 屬性

任何 opacity 值小於 1 的元素，都會自動創建一個新的 Stacking Context。

.overlay {
  opacity: 0.8; /* 創建新的 Stacking Context */
}

transform 屬性

當一個元素應用了 transform 屬性時，它也會創建一個新的 Stacking Context。

.box {
  transform: scale(1.2); /* 創建新的 Stacking Context */
}

z-index 與 Stacking Context 的關係

z-index 是用來控制元素在 Stacking Context 中的堆疊順序的屬性。

具有更高 z-index 值的元素會顯示在更上層。

當多個元素在同一個 Stacking Context 中，z-index 值越大，元素越靠前。

例子：z-index 和 Stacking Context

.container {
  position: relative;
  z-index: 10;
}

.child {
  position: absolute;
  z-index: 20;
}

在這個例子中，.container 創建了一個新的 Stacking Context，而 .child 在這個 Stacking Context 中的 z-index 是 20。

因此 .child 會顯示在 .container 內的其他元素之上。

然而，如果有另一個元素在 DOM 中，但屬於不同的 Stacking Context。

即使它的 z-index 比 20 更高，也不會影響 .child 的顯示順序。

為什麼要理解 Stacking Context？

理解 Stacking Context 對於控制複雜的布局非常重要。

以下是一些常見的應用場景：

• 互動視窗（Modal）：模態窗口通常需要顯示在頁面的最前面，你需要確保它們在最高的 Stacking Context 中。
• 下拉選單（Dropdown）：下拉菜單通常需要顯示在其他內容之上，但仍然在特定的上下文內進行排列。
• 彈出提示（Tooltip）：工具提示需要在其觸發元素之上顯示，這時需要控制 Stacking Context 和 z-index。

結語

Stacking Context 是一個在處理元素重疊問題時不可或缺的概念。

了解它的工作原理，能讓你在設計網頁時更好地控制元素的顯示順序，避免意外的顯示問題。

希望這篇文章能幫助你，更好地理解和運用 Stacking Context，讓你的布局更加靈活和精確！