CSS - Z-Index：掌握元素層叠藝術
你好，未來的網頁設計魔法師們！今天，我們將要深入探討CSS中最神奇屬性之一：z-index。這就像是一種超能力，讓你能夠控制哪些元素顯示在其它元素的上方。興奮吧？讓我們一起踏上這段旅程！
Z-Index是什麼？
在我們深入細節之前，讓我們先了解z-index到底是什麼。想像你正在桌上排列一堆紙張。z-index就像是在決定哪張紙應該放在其它紙張的上面。在網頁設計中，它幫助我們控制重疊元素的堆疊順序。
簡短歷史課
在網頁設計的早期，創建分層佈局簡直是一個惡夢。我們不得不使用笨重的表格布局，或者求助于使用框架（可怕！）。然後z-index出現了，突然之間，我們可以輕鬆地創建複雜的、重疊的設計。這就像是在電子遊戲中發現了一條秘密通道！
可能的值
現在，讓我們看看z-index可以採取哪些不同的值：
| 值 | 描述 |
|---|---|
| auto | 預設值。元素根據它在HTML中的順序堆疊 |
| number | 可以是正數或負數。數字越大，越會顯示在數字较小的上方 |
| initial | 將z-index設置為其預設值 |
| inherit | 從父元素繼承z-index值 |
適用範圍
Z-index適用於定位元素（position: relative, absolute, fixed, 或 sticky）。它對靜態元素無效，這是默認的定位方式。
DOM語法
以下是如何在HTML中設置z-index：
<div style="z-index: 1;">我在上面！</div>
<div style="z-index: 0;">我在下面！</div>但記住，通常最好將你的樣式保存在一個分離的CSS文件中。我們來看看這是什麼樣的：
.on-top {
z-index: 1;
}
.below {
z-index: 0;
}<div class="on-top">我在上面！</div>
<div class="below">我在下面！</div>CSS z-index - auto值
當你没有指定z-index，或者將它設置為'auto'時，元素會根據它在HTML中出現的順序堆疊。我們來看一個例子：
<div class="box red">紅色盒子</div>
<div class="box blue">藍色盒子</div>
<div class="box green">綠色盒子</div>.box {
width: 100px;
height: 100px;
position: absolute;
}
.red {
background-color: red;
left: 0;
top: 0;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
}
.green {
background-color: green;
left: 100px;
top: 100px;
}在這種情況下，綠色盒子會在最上面，然後是藍色，然後是紅色。就像它們在玩跳馬遊戲！
CSS z-index - 使用正整數
現在，讓我們來點變化。我們可以使用正整數來明確控制堆疊順序：
.red {
background-color: red;
left: 0;
top: 0;
z-index: 3;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
z-index: 2;
}
.green {
background-color: green;
left: 100px;
top: 100px;
z-index: 1;
}有了這些z-index值，紅色會在最上面，然後是藍色，然後是綠色。就像我們給它們發了VIP通行證，讓它們進入專屬俱樂部，紅色是最重要的賓客！
CSS z-index - 使用負整數
負的z-index值就像把元素送到地下室。它們會出現在具有正數或無z-index的元素後面：
.background {
background-color: yellow;
z-index: -1;
}
.content {
z-index: 0;
}在這裡，黃色背景總是會在內容後面。就像為戲劇設置了一個背景！
CSS z-index - 使用粘性定位
粘性定位就像給元素一張許可證，讓它在特定條件下離開其正常流動。z-index也與粘性定位一起工作：
.sticky-header {
position: sticky;
top: 0;
z-index: 100;
}這個頭部在滾動時會粘在視口頂部，並且由於其高的z-index，它會保持在其他內容之上。就像一個永遠支持你的忠實朋友！
CSS z-index - 使用固定定位
固定定位與絕對定位相似，但它總是相對於視口。在這裡，z-index非常有用：
.modal {
position: fixed;
z-index: 1000;
}
.overlay {
position: fixed;
z-index: 999;
}這樣可以確保你的模態對話框總是顯示在遮罩層之上。就像確保明星總是處於聚光燈下！
CSS z-index - 使用靜態定位
記得上次我說z-index在靜態定位上無效嗎？這就是會發生的事情：
.static-element {
position: static;
z-index: 999; /* 這不會有任何作用 */
}就像在魔法世界中使用魔法治愈——它就是不起作用！
CSS z-index - 使用相對定位
相對定位是z-index真正發光的地方。它讓你能夠創建複雜的佈局而不會改變文檔流：
.parent {
position: relative;
}
.child1 {
position: relative;
z-index: 2;
}
.child2 {
position: relative;
z-index: 1;
}在這裡，child1會出現在child2之上，即使child2在HTML中出現得更晚。就像給你的元素賦予了超能力，讓它們能夠違抗重力！
好了，各位！你剛剛通過z-index的力量提升了你的CSS技能。記住，能力越大，責任越大。明智地使用z-index，你的佈局會感謝你。開心編程，願z-index與你同在！
Credits: Image by storyset