CSS Z Indexing

在前端開發中，CSS Z Indexing（Z軸層疊順序）是控制元素層級的一種重要方式。在Web頁面布局中，我們有時需要讓元素重疊排列，這就涉及到元素在Z軸層疊上的先後順序。本文將從多個方面詳細探討CSS Z Indexing的相關知識。

一、基礎概念

在介紹CSS Z Indexing之前，我們先來了解一下幾個基礎概念。

1. 塊級元素和內聯元素

在HTML中，元素可以分為兩種類型：塊級元素和內聯元素。塊級元素通常以塊的形式展現，佔據一整行或多行，例如<div>、<p>、<h1>等。內聯元素通常以行內的形式展現，不會獨佔一行，例如<span>、<a>、<img>等。

/* 塊級元素 */
div {
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

/* 內聯元素 */
span {
  color: red;
}

2. 定位元素

CSS中，通過定位可以將元素從普通布局中移開，並且可以通過top、bottom、left、right屬性指定元素的具體位置。使用定位屬性時，需要將元素的position屬性設置為relative、absolute或fixed。

/* 定位元素 */
div {
  position: relative;
  top: 50px;
  left: 100px;
}

3. 層疊上下文

在頁面中，每個元素都存在一個層疊上下文。層疊上下文是指元素在Z軸上的順序，即元素重疊時，哪個元素在前面、哪個元素在後面。層疊上下文是一種三維概念，由以下因素共同影響：

• 元素在DOM樹中的順序
• 元素的定位方式和層疊等級（Z-index）
• 元素自身屬性，如opacity、transform等

元素的Z軸層疊順序越大，就越在上層，如果兩個元素的Z-index相等，則後來居上。

二、Z-index屬性

CSS中，可以使用Z-index屬性來設置元素的層疊等級。它的取值為整數（正數、負數或0），數量級可以很大。Z-index只對定位元素（position值為relative、absolute或fixed）有效，不定位的元素無法設置層疊等級（Z-index默認為auto）。

Z-index屬性僅僅在其值為正數的時候才有效。當元素的Z-index設置為負數時，該元素處於透明的狀態，即該元素處於下面的內容遮擋住了該元素。Z-index為0的元素位於層疊上下文的底部，而Z-index為正數的元素位於層疊上下文的頂部。

/* 設置Z-index */
div {
  position: relative;
  z-index: 1;
}

三、多個層疊上下文的情況

在實際開發中，常見的情況是，一個元素的子元素比父元素的另一個兄弟元素（甚至比祖父元素）還要高級。如果子元素定位了並設置了Z-index，其Z-index值的起點是父元素Z-index值的負數。如果祖先元素們都設置了Z-index，這個負數加上祖先元素Z-index值的和，就是子元素Z-index的實際值。

/* 設置多層層疊上下文 */
.parent1 {
  position: relative;
  z-index: 1;
}
.parent2 {
  position: relative;
  z-index: 2;
}
.child {
  position: absolute;
  z-index: -1;
  left: 20px;
  top: 20px;
}

四、注意事項

CSS Z-indexing的使用需要注意一些事項，下面列出一些常見的問題。

1. Z-index只控制同一層疊上下文中的元素。

如果兩個元素處於不同的層疊上下文中，Z-index並不會將它們的層疊順序關聯在一起。層疊上下文的形成有多種因素，如元素的position值、opacity值等，詳情見上文。

2. 定位會自動將元素變成層疊上下文。

設置元素為position：relative、absolute、fixed時，該元素將自動成為一個層疊上下文。注意，只有設置定位屬性的元素才可以使用Z-index屬性。

3. 層疊上下文緊貼父容器的邊緣，不隨父元素位置的改變而移動。

父元素移動，子元素隨之移動，層疊關係不會變化。

五、總結

本文對CSS Z-indexing的相關知識進行了詳細的闡述，包括基礎概念、Z-index屬性、多個層疊上下文的情況以及注意事項等多個方面。Z-index是控制Web頁面元素層疊順序的重要方式，熟練掌握層疊上下文和Z-index屬性的使用，有助於完善Web頁面的布局效果。