CSS z-index – 在W3Schools學習如何定位HTML元素，使用z-index屬性

一、什麼是z-index屬性

z-index是CSS屬性，用於控制同一層級內元素的堆疊順序。在HTML中，元素一般是從上往下依次堆疊，而z-index可以改變這個順序。具有較高z-index值的元素會在堆疊中覆蓋具有較低z-index值的元素。z-index值越大的元素，就越靠近屏幕的前端。

一般情況下，z-index屬性只適用於使用了定位（position）的元素，如position: relative;、position: absolute;或position: fixed;。因為只有定位的元素才能和其他元素重合，並且參與z-index的計算。

以下是一個簡單的示例代碼：

<div class="container">
  <div class="block green"></div>
  <div class="block red"></div>
</div>

CSS:

.container {
  position: relative;
}

.block {
  width: 200px;
  height: 200px;
  position: absolute;
}

.green {
  background-color: green;
  z-index: 1;
  top: 0;
  left: 0;
}

.red {
  background-color: red;
  z-index: 2;
  top: 50px;
  left: 50px;
}

在這個例子中，我們創建了兩個塊（green和red），它們都被放置在具有相對定位的容器（container）內。塊的定位使用了絕對定位，並設置了top和left值。其中，green塊具有較低的z-index，而red塊具有較高的z-index。因此，red塊會向前移動，覆蓋green塊。

二、z-index屬性值

z-index屬性可以接受多種類型的值。下面列舉了一些常見的z-index值，以及它們的含義：

• auto：此為z-index的默認值，意味著元素將會以正常順序進行堆疊。
• 整數值：可設置正整數、負整數或0。正整數值越大的元素，越靠近頂部。負整數值越小的元素，越靠近底部。0值在整數值之前，普通的定位元素也會在0值之上。
• inherit：繼承父元素的z-index值。
• initial：設置為默認值auto。
• unset：未設置任何值時，設置為initial或inherit。

三、z-index堆疊順序的注意事項

在使用z-index屬性時，有幾個值得注意的地方：

1. z-index只在定位元素之間進行堆疊排序。非定位元素的z-index值無效。
2. 在同一層級內，元素越在後面，其z-index值也越小。例如，位置靠後的元素z-index默認是小於位置靠前的元素。
3. 在某些情況下，定位元素可能不會按您預期的方式進行堆疊。這通常是因為該元素的z-index值被父級元素的z-index所覆蓋。此時，可以嘗試更改父級元素的z-index值，以改變該元素的堆疊順序。

四、總結

在使用z-index屬性時，需要注意以下幾點：

• z-index只適用於定位元素
• 設置的z-index值越大，越靠近前面
• 非定位元素的z-index值無效
• 整數值表示堆疊順序，而不是層數
• 在同一層級內，元素越在後面，其z-index值也越小
• z-index值被父級元素的z-index所覆蓋時，可以嘗試更改父級元素的z-index值