深入理解CSS中的層疊上下文（z-index）

一、層疊上下文的概念

CSS中的層疊上下文是指一組相關元素在3D空間中按照一定的順序堆疊起來，類似於一個立體的疊加圖層。對於同一個層疊上下文中的元素來說，它們的層級關係是由z-index屬性來控制的。對於不同層疊上下文中的元素，它們的層級關係是由它們在文檔流中的位置確定的。

一個元素的層疊上下文可以通過以下方式創建:

1. 根元素(html)
2. 定位元素(position:absolute/fixed, transform, opacity, filter)
3. flex容器（display:flex|inline-flex元素的直接子元素）
4. grid容器（display:grid|inline-grid元素的直接子元素）
5. canvas（canvas元素及其子元素）
6. iframe
7. z-index值不為auto的元素
8. mix-blend-mode值不為normal的元素

二、層疊上下文的優先順序

對於同層級的元素，他們的層疊關係是由它們在文檔流中的位置和z-index值來確定。當兩個元素髮生重疊時，層疊上下文的優先順序可以按照以下規則進行判斷：

1. 層疊上下文總是位於普通元素之上。如果兩個層疊上下文的元素相交，那麼包含子元素多的元素層級更高。
2. 如果兩個元素在同一個層疊上下文中，那麼z-index值高的元素層級更高。
3. 如果兩個元素不在同一個層疊上下文中，無論z-index值如何，層疊上下文的元素始終在普通元素之上。

示例代碼：

  <div class="parent">
    <div class="child child1">Child1</div>
    <div class="child child2">Child2</div>
  </div>
  
  .parent {
    position: relative;
    background: gray;
    z-index: 1;
  }
  
  .child {
    position: absolute;
    width: 50px;
    height: 50px;
  }
  
  .child1 {
    left: 0;
    top: 0;
    background: red;
    z-index: 2;
  }
  
  .child2 {
    left: 25px;
    top: 25px;
    background: blue;
    z-index: 1;
  }

在這個例子中，紅色的Child1元素位於藍色的Child2元素之上，因為它擁有更高的z-index值。同時，由於兩個元素都在同一個父元素中，所以它們的層級順序由z-index值決定。

三、注意事項

使用z-index屬性時，需要注意如下細節：

1. z-index屬性只對定位元素(position:absolute/fixed)和flex/grid容器中的元素生效。對於普通的文檔流元素無效。
2. z-index值可以是負數，這時它們會被放在所有正常z-index值之下。
3. 如果一個元素的z-index值沒有被顯式地設置，那麼它的值會被繼承自父元素。
4. z-index值越高的元素越容易被用戶點擊到。
5. 使用多個層疊上下文來構建複雜的布局時，需要時刻保持層級關係的清晰。

示例代碼：

  <div class="parent">
    <div class="child child1">Child1</div>
    <div class="child child2">Child2</div>
  </div>
  
  .parent {
    background: gray;
  }
  
  .child {
    position: absolute;
    width: 50px;
    height: 50px;
  }
  
  .child1 {
    left: 0;
    top: 0;
    background: red;
  }
  
  .child2 {
    left: 25px;
    top: 25px;
    background: blue;
    z-index: -1;
  }

在這個例子中，藍色的Child2元素的z-index值為負數，因此它會被放在所有正常z-index值之下。這時，即使它在父元素中位置靠上，也不會遮擋住紅色的Child1元素。

四、總結

層疊上下文對於Web頁面的布局和交互非常重要，可以用來控制元素之間的層級關係以及遮擋關係。熟練的掌握z-index屬性的用法和層疊上下文的創建方式，可以幫助我們更加高效地實現複雜的Web頁面。