CSS中的堆疊上下文（Stacking Context）概念是為了管理和控制網頁元素的重疊順序而引入的。堆疊上下文的引入解決了以下幾個關鍵問題：
-
層次管理：
- 在網頁中，多個元素可能會相互重疊，堆疊上下文定義了這些元素的堆疊順序。通過明確的規則，瀏覽器可以決定哪些元素顯示在前面，哪些元素在后面。
-
隔離與控制：
- 堆疊上下文使得不同的層次獨立，可以在不同的上下文中控制元素的層次關系而不影響其他上下文。例如，在一個彈出層中控制其內部元素的層次時，不會影響頁面其他部分的層次關系。
-
簡化復雜性：
- 在一個復雜的網頁布局中，通過堆疊上下文，可以將布局分解成多個獨立的上下文來管理，減少整體復雜性。例如，通過z-index屬性在局部范圍內調整元素的層次，而無需擔心全局影響。
創建堆疊上下文的條件
以下是一些創建新的堆疊上下文的常見條件：
- 根元素（HTML元素）
- 設置了
z-index且position為relative、absolute、fixed或sticky的元素 opacity值小于1的元素transform值不為none的元素filter值不為none的元素will-change屬性指定了特定的CSS屬性isolation屬性設置為isolate的元素
堆疊順序規則
在同一個堆疊上下文中，元素的堆疊順序遵循以下規則：
- 根堆疊上下文的背景和邊框
- 負z-index的堆疊子上下文及其子元素
- 正常流中的塊級元素及其子元素
- 正常流中的浮動元素及其子元素
- inline塊元素及其子元素
- 正z-index的堆疊子上下文及其子元素
示例
以下是一個簡單示例，展示如何通過不同的CSS屬性創建和控制堆疊上下文：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>堆疊上下文示例</title><style>.parent {position: relative;z-index: 1;background-color: lightblue;width: 200px;height: 200px;}.child {position: absolute;z-index: 2;background-color: lightcoral;width: 100px;height: 100px;top: 50px;left: 50px;}.sibling {position: relative;z-index: 3;background-color: lightgreen;width: 100px;height: 100px;top: -150px;left: 150px;}</style>
</head>
<body><div class="parent">Parent<div class="child">Child</div></div><div class="sibling">Sibling</div>
</body>
</html>
在這個示例中：
.parent元素創建了一個新的堆疊上下文。.child元素在其父元素的堆疊上下文中，因此即使它有較高的z-index，也不會超越parent之外的元素。.sibling元素具有更高的z-index，并且在另一個堆疊上下文中，因此它會在parent元素之上顯示。
通過引入堆疊上下文，CSS使得開發者能夠更精確地控制元素的顯示層次，確保網頁布局和設計符合預期。
)
)
)
