CSS HTML Z-Index原理解析

一、Z-Index是什麼？

Z-Index是CSS中用來控制元素層疊順序的一個屬性，在前端開發中非常常用。每個元素在網頁中都有一個默認的層疊順序，通常是按照HTML文檔流中的順序進行渲染。但是在一些特定的場景下，我們需要改變不同元素的層疊順序，使得更高層次的元素能夠遮蓋住下面的元素，這時候就需要使用Z-Index屬性。

二、如何使用Z-Index？

我們通過設置元素的Z-Index屬性的值，來控制元素的層疊順序，具體來說，數值越大的元素越靠近用戶的視覺方向，就會覆蓋前面數值較小的元素。一般來說，Z-Index的可取值為整數，但如果需要特定的效果，單獨的小數值或negative value 也可以使用。

示例代碼：

div {
  position: absolute;
  z-index: 10;
}

span {
  position: absolute;
  z-index: 20;
}

三、Z-Index和元素定位的關係

Z-Index屬性的作用對象是定位元素（position屬性為relative、absolute、fixed）在圖層中的排序，沒有position屬性或者position為static的普通標籤是不能使用Z-Index屬性來改變顯示層次的。當使用Z-Index屬性時，元素需要先被定位（position屬性為非static），因此Z-Index屬性通常和position屬性一起使用。

示例代碼：

div {
  position: relative;
  z-index: 1;
}

span {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

四、什麼是堆疊上下文？

在CSS中，元素的層疊順序並不是完全按照Z-Index屬性的大小進行排序的，會存在一些特殊的情況。比如，如果兩個元素擁有不同的堆疊上下文，那麼它們的層疊順序並不是簡單的比較兩個Z-Index值大小。

堆疊上下文可以理解為一種三維概念，是指某個HTML元素及其所有子元素的層疊順序。在某個堆疊上下文中，屬於同一個元素的層疊層次會被「壓縮」到一個虛擬的二維平面中，各個平面之間按照一定的規則進行層疊順序排序。

五、如何形成堆疊上下文？

以下情況會創建一個堆疊上下文：

• 根元素（即html元素）
• position屬性值為absolute或fixed
• flex容器的子元素，且flex項的z-index不為auto
• opacity小於1的元素
• transform不為none的元素
• mix-blend-mode不為normal的元素
• filter不為none的元素
• perspective不為none的元素

六、堆疊順序的計算規則

在同一個堆疊上下文中，元素的層疊順序計算規則如下：

1. 堆疊上下文根據層疊上下文的屬性（如上面所述的position、opacity等）等級確定其層疊順序。
2. 在同一堆疊上下文中，根據Z-Index大小和先後順序確定各元素的順序。
3. 在不同的堆疊上下文之間，由於兩個堆疊上下文根據規則1確定的順序可能相同，但是其排序方法、間隔、對齊等方式不同，因此無法一一比較，需要根據某些比較規則進行排序。

七、層疊順序的優先順序

在某些特定情況下，不同規則會產生矛盾，如何確定層疊順序？CSS規範為我們提供了一個比較詳細的規則，簡單說來是根據以下優先順序進行計算：

1. Z-Index最大的元素永遠處於視覺最頂端
2. 非Auto Z-Index屬性值的元素優先於Auto Z-Index的元素
3. 其它屬性相同的元素按照文檔流順序排序（HTML中的先後順序）

八、嵌套的堆疊上下文

在多個嵌套的元素中使用Z-Index屬性會非常棘手。但是，理解嵌套的堆疊上下文如何形成以及其在層疊順序中的作用可以很好地解決這個問題。

當一個元素的Z-Index值大於包含它的堆疊上下文的Z-Index值時，該元素的堆疊上下文會創建新的層疊邏輯上下文。

這種新的堆疊上下文等級會高於包含它的堆疊上下文，所以出於實用原因，我們可以在需要解決層疊順序的元素上創建一個新的堆疊上下文。

九、層疊順序的調試技巧

• 通過閱讀HTML代碼，理清HTML文檔流的先後順序
• 確保所有需要層疊的元素都被正確地定位（position）
• 對元素批量區分堆疊上下文進行調整(因為不同的元素堆疊上下文的計算規則是不同的）
• 使用瀏覽器的開發者工具進行調試，可查看層疊順序、Z-Index值、堆疊上下文等信息