理解 CSS 中的 z-index 屬性

在前端開發中，我們經常會使用到 z-index 屬性來控制 HTML 元素的層級關係。z-index 屬性的取值可以是正整數、負整數以及 auto，它們分別代表元素在層級中的優先級。本文將從以下幾個方面對 z-index 屬性進行詳細的闡述。

一、z-index的基本用法

z-index 屬性常用於相對定位（position: relative）和絕對定位（position: absolute）的元素上，在使用定位屬性時，元素的位置會被擠壓在 HTML 文檔流之外，z-index 屬性可以改變元素的層級優先級，從而使得處於更高優先級的元素顯示在更上方。

舉個例子，下面的代碼中，我們使用相對定位的方式將三個 div 元素移動到不同的位置，並使用 z-index 屬性來調整它們的層級關係。

<div id="box-1" style="position:relative;z-index: 1"></div>
<div id="box-2" style="position:relative;z-index: 2"></div>
<div id="box-3" style="position:relative;z-index: -1"></div>

上面代碼中，box-1 的 z-index 取值為 1，box-2 的 z-index 取值為 2，box-3 的 z-index 取值為 -1。由於 box-2 的層級關係最高，因此它在頁面上顯示在最上方；而box-3 的層級關係最低，因此它在頁面上顯示在最下方。

二、z-index的取值範圍

z-index 屬性的取值範圍可以為正整數、負整數和 auto，其中正整數的優先級最高，負整數的優先級最低。當上下文堆疊（stacking context）發生時，通過設置不同元素的 z-index 可以調整元素的層級關係。

下面的代碼中，我們通過使用絕對定位的方式創建六個 div 元素，並為它們設置不同的 z-index 值，即用來表示不同的層級關係。

<div class="box box-1" style="z-index: 10"></div>
<div class="box box-2" style="z-index: 20"></div>
<div class="box box-3" style="z-index: 5"></div>
<div class="box box-4" style="z-index: auto"></div>
<div class="box box-5" style="z-index: -5"></div>
<div class="box box-6" style="z-index: -20"></div>

上面代碼中，我們為其中一個 div 元素的 z-index 取值設定為 auto，這個元素的層級優先級將會和其他非 static 位置的兄弟元素相等。

三、z-index與父元素的層級關係

在使用 z-index 屬性時，需要注意元素的層級關係是與其父元素的層級關係相關聯的。如果一個元素的 z-index 值較高，但其父元素的 z-index 值較低，那麼該元素仍然會被其父元素遮蓋。

下面的代碼中，我們創建了一個父元素和一個子元素，在子元素上設置 z-index 值為 1，在父元素上設置 z-index 值為 -1。我們會發現無論子元素的 z-index 值如何，它都無法超出父元素的層級關係，仍然會被父元素遮蓋。

<div class="parent" style="z-index: -1;">
  <div class="child" style="z-index: 1"></div>
</div>

四、z-index與透明度

在設置透明度時，同樣需要考慮 z-index 的影響。當一個元素的透明度發生改變時，它的層級關係也會發生改變。當一個元素的透明度為 0 時，它所在的區域會被認為是空白，該元素的層級關係也會被忽略。

下面的代碼中，我們創建了兩個 div 元素，其中一個元素的透明度為不透明（opacity: 1），另一個元素的透明度為 0（opacity: 0）。由於第二個元素的透明度為 0，它所在的區域會被認為是空白，因此其內部的文本信息並不會顯示出來。

<div id="box-1" style="position:absolute;z-index: 1;opacity: 1;">Box 1</div>
<div id="box-2" style="position:absolute;z-index: 2;opacity: 0;">Box 2</div>

五、z-index屬性的優化

當頁面中存在大量的 z-index 屬性時，會佔用大量的系統資源，從而降低頁面的性能。因此，在使用 z-index 屬性時應盡量避免其濫用，並採用合理的層級關係設置來減小頁面對於 z-index 屬性的依賴程度。

在下面的示例中，使用了一些 CSS3 動畫效果，我們通過添加 CSS3 的 transform 屬性來進行動畫的實現，而 transform 屬性不會對頁面的層級關係產生影響，從而減小了對於 z-index 屬性的依賴程度。

<div class="box box-1"></div>
<div class="box box-2"></div>

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  background: #f90;
  transition: transform 0.5s ease-in-out;
  transform: scale(1);
}

.box-1:hover {
  transform: scale(1.2);
}

.box-2:hover {
  transform: rotate(180deg);
}

六、總結

z-index 屬性在前端開發中扮演着重要的角色，它可以控制元素的顯示/隱藏關係，優化用戶交互體驗。在使用 z-index 屬性時，需要注意元素的層級關係是與其父元素的層級關係相關聯的，同時在優化頁面性能時，應盡量避免濫用 z-index 屬性。