在网页开发里，页面元素的层级关系就像盖房子时的楼层一样重要。要是元素层级没处理好，页面就会变得乱七八糟，用户体验也会大打折扣。CSS 里的 z - index 属性就是用来控制元素层级的，但它有点复杂，很多开发者都被它弄得晕头转向。接下来，咱们就一起把 z - index 层叠上下文的迷雾给解开，构建出可控的页面元素层级关系。
一、认识 z - index 和层叠上下文
1.1 啥是 z - index
z - index 就像是给页面元素在垂直方向上排了个顺序。数值越大，元素就越靠上，越容易被用户看到。打个比方，你在纸上画了几个图形，z - index 大的图形就像是画在最上面一层的纸，会盖住下面的图形。
1.2 层叠上下文是啥
层叠上下文可以理解成一个独立的小世界，在这个小世界里，元素按照自己的规则来确定层级。一个页面可能会有好几个层叠上下文，每个层叠上下文之间相互独立。就好比一个小区里有好几栋楼，每栋楼里的房间排序是独立的，不同楼之间不影响。
二、层叠上下文的创建规则
2.1 根层叠上下文
HTML 文档的根元素 <html> 会创建一个根层叠上下文。这就像是小区的大门，所有的元素都在这个大环境里。
2.2 特定属性创建层叠上下文
很多 CSS 属性都能创建层叠上下文，下面给大家详细说说：
2.2.1 position 属性
当元素的 position 属性值为 absolute、relative、fixed 或 sticky，并且 z - index 不是 auto 时，会创建层叠上下文。看下面这个例子（CSS 技术栈）：
/* 创建一个相对定位的元素，并设置 z - index 为 1 */
.relative - element {
position: relative;
z - index: 1;
background - color: lightblue;
width: 200px;
height: 200px;
}
在这个例子里，.relative - element 因为 position 是 relative 且 z - index 不是 auto，所以创建了一个层叠上下文。
2.2.2 opacity 属性
当元素的 opacity 值小于 1 时，也会创建层叠上下文。比如：
/* 创建一个透明度为 0.5 的元素 */
.opacity - element {
opacity: 0.5;
background - color: lightgreen;
width: 200px;
height: 200px;
}
这里的 .opacity - element 因为 opacity 小于 1，就创建了一个层叠上下文。
2.2.3 transform 属性
当元素应用了 transform 属性（比如 translate、rotate 等）时，会创建层叠上下文。示例如下：
/* 创建一个旋转 45 度的元素 */
.transform - element {
transform: rotate(45deg);
background - color: lightcoral;
width: 200px;
height: 200px;
}
.transform - element 因为应用了 transform 属性，所以创建了层叠上下文。
三、层叠顺序
3.1 层叠顺序规则
在同一个层叠上下文中，元素按照一定的顺序进行层叠。从下到上的顺序大致是：
- 背景和边框：层叠上下文的背景和边框在最下面。
- 负 z - index 值的元素：
z - index为负数的元素会在背景上面，但在其他元素下面。 - 块级元素：普通的块级元素。
- 浮动元素：浮动的元素会在块级元素上面。
- 行内元素：行内元素会在浮动元素上面。
- 正 z - index 值的元素：
z - index为正数的元素会在最上面。
3.2 示例说明
看下面这个例子（CSS 技术栈）：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 根层叠上下文的背景 */
body {
background - color: gray;
}
/* 负 z - index 的元素 */
.negative - z {
position: relative;
z - index: -1;
background - color: lightblue;
width: 200px;
height: 200px;
}
/* 块级元素 */
.block - element {
background - color: lightgreen;
width: 200px;
height: 200px;
}
/* 浮动元素 */
.float - element {
float: left;
background - color: lightcoral;
width: 200px;
height: 200px;
}
/* 行内元素 */
.inline - element {
background - color: lightyellow;
}
/* 正 z - index 的元素 */
.positive - z {
position: relative;
z - index: 1;
background - color: lightpink;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="negative - z">负 z - index 元素</div>
<div class="block - element">块级元素</div>
<div class="float - element">浮动元素</div>
<span class="inline - element">行内元素</span>
<div class="positive - z">正 z - index 元素</div>
</body>
</html>
在这个例子中，负 z - index 的元素会被块级元素盖住，浮动元素会在块级元素上面，行内元素又在浮动元素上面，正 z - index 的元素会在最上面。
四、应用场景
4.1 弹出框
在网页中，弹出框是很常见的。为了让弹出框能覆盖其他元素，我们可以给弹出框设置一个较大的 z - index 值。比如：
/* 弹出框样式 */
.popup {
position: fixed;
z - index: 999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background - color: white;
padding: 20px;
border: 1px solid black;
}
这里的 .popup 元素因为 z - index 为 999，会覆盖其他元素。
4.2 导航菜单
导航菜单有时候会有下拉菜单，为了让下拉菜单能显示在其他元素上面，我们也可以设置合适的 z - index 值。示例如下：
/* 导航菜单样式 */
.nav - menu {
position: relative;
}
/* 下拉菜单样式 */
.dropdown - menu {
position: absolute;
z - index: 100;
display: none;
background - color: white;
border: 1px solid black;
}
/* 鼠标悬停时显示下拉菜单 */
.nav - menu:hover.dropdown - menu {
display: block;
}
这里的 .dropdown - menu 元素因为 z - index 为 100，会显示在其他元素上面。
五、技术优缺点
5.1 优点
- 灵活性高：通过设置
z - index，可以很方便地控制元素的层级关系，实现各种复杂的布局效果。 - 兼容性好：
z - index是 CSS 的标准属性，在各种浏览器中都有很好的支持。
5.2 缺点
- 难以调试：当页面元素很多，层叠上下文复杂时，很难确定元素的最终层级关系，调试起来比较困难。
- 容易造成混乱：如果不合理地使用
z - index，可能会导致元素层级混乱，影响页面的正常显示。
六、注意事项
6.1 避免使用过大的 z - index 值
虽然可以通过设置很大的 z - index 值来让元素显示在最上面，但这样会让代码难以维护，而且可能会和其他插件或组件的 z - index 冲突。
6.2 合理创建层叠上下文
要根据实际需求合理创建层叠上下文，避免创建过多不必要的层叠上下文，增加代码的复杂度。
6.3 考虑文档流
在设置 z - index 时，要考虑元素在文档流中的位置，因为文档流也会影响元素的层叠顺序。
七、文章总结
通过对 z - index 和层叠上下文的学习，我们了解了如何创建层叠上下文，掌握了层叠顺序的规则，并且知道了在不同的应用场景中如何使用 z - index 来控制元素的层级关系。虽然 z - index 有一些缺点和需要注意的地方，但只要我们合理使用，就能构建出可控的页面元素层级关系，让网页更加美观和易用。
评论