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或无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