CSS z-index 属性（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：理解层叠的奥秘

在网页开发中，元素的层叠顺序（z-axis）是影响页面视觉呈现的核心概念之一。CSS 的 z-index 属性就像一把魔法钥匙，能够精准控制元素在垂直方向上的排列层级。然而，许多开发者在初次接触这一属性时，常会陷入“明明设置了 z-index，却看不到效果”的困惑。本文将通过循序渐进的方式，结合实际案例，帮助读者彻底掌握 z-index 属性的使用逻辑与常见误区。

一、z-index 的基本概念与使用方法

1.1 层叠的直观理解

想象你正在整理书桌：最底层是桌垫，中间是笔记本电脑，最上层是台灯。网页中的元素层叠与此类似，z-index 就是用来定义元素在“垂直维度”上的位置。数值越大，元素越靠近“视觉最前端”。

1.2 属性基础语法

.element {
  position: relative | absolute | fixed | sticky; /* 必须设置定位属性 */
  z-index: integer | auto;
}

关键点：

• z-index 仅对 定位元素（position 值非 static 的元素）生效
• 默认值为 auto（继承父元素值或视为 0）
• 数值范围理论上可为任意整数，但建议使用合理区间（如 -1000 到 1000）

1.3 简单案例演示

<div class="box box1">Layer 1 (z-index: 1)</div>
<div class="box box2">Layer 2 (z-index: 2)</div>

<style>
.box {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
}
.box1 { background: red; z-index: 1; }
.box2 { background: blue; margin-top: 20px; z-index: 2; }
</style>

观察结果：蓝色方块覆盖红色方块，因 z-index 值更高。

二、层叠顺序的深层规则

2.1 核心规则解析

层叠顺序遵循以下层级结构（从最低到最高）：

1. 根元素（html）
2. 非定位元素
3. 定位元素（按 z-index 值排序）
4. 弹出元素（如 select 下拉框）

2.2 层叠上下文（Stacking Context）

这是理解 z-index 的关键概念。每个层叠上下文形成独立的层叠层级，如同不同画布上的图层：

• 触发条件：
  • 根元素（html）
  • position 值非 static 且 z-index 值非 auto 的元素
  • opacity 值小于 1 的元素（IE8+）
  • transform、filter、mix-blend-mode 等属性非 none 的元素（现代浏览器）

2.3 表格对比：层叠上下文的影响

形象比喻：层叠上下文如同不同的画布，即使子元素 z-index 更高，也无法突破父级画布的限制。

三、常见问题与解决方案

3.1 为什么设置了 z-index 无效？

原因排查清单：

1. 元素未设置 position 属性（常见错误）
2. 父元素形成了新的层叠上下文（如设置了 transform）
3. 元素处于不同层叠上下文层级中

案例演示：

<div class="parent">
  <div class="child1">Child 1 (z-index: 3)</div>
</div>
<div class="sibling">Sibling (z-index: 2)</div>

<style>
.parent {
  position: relative;
  z-index: 1;
  transform: translateZ(0); /* 触发新层叠上下文 */
}
.child1 { position: absolute; z-index: 3; }
.sibling { position: relative; z-index: 2; }
</style>

结果：Sibling 元素始终在 Parent 层叠上下文之下，无法覆盖子元素。

3.2 如何控制嵌套元素的层级？

解决方案：

• 方法一：在父元素层级内调整子元素的 z-index
• 方法二：通过调整层叠上下文边界（如移除 transform）
• 方法三：使用更高层级的定位容器包裹目标元素

四、实战案例：导航栏与弹窗设计

4.1 场景需求

设计一个固定顶部导航栏，当鼠标悬停时弹出子菜单，要求：

1. 导航栏始终位于内容区域之上
2. 子菜单覆盖页面其他内容

4.2 代码实现

<header class="nav-bar">
  Menu
  <div class="submenu" style="z-index: 1000;">
    <!-- 子菜单内容 -->
  </div>
</header>
<main class="content">页面主体内容</main>

<style>
.nav-bar {
  position: fixed;
  top: 0;
  z-index: 1000; /* 基准层级 */
}
.submenu {
  position: absolute;
  z-index: 1001; /* 在父级上下文中更高 */
}
.content {
  padding-top: 60px;
  z-index: 999; /* 低于导航栏层级 */
}
</style>

4.3 关键点分析

• 导航栏通过 position: fixed 创建独立层叠上下文
• 子菜单在父级上下文中通过 z-index 调整
• 主体内容需确保 z-index 低于导航栏层级

五、进阶技巧与最佳实践

5.1 避免层级爆炸

建议采用层级管理策略：

:root {
  --base-z: 100;
  --header-z: 200;
  --modal-z: 300;
}

5.2 利用层叠上下文隔离

/* 遮罩层与弹窗独立层级 */
.modal-container {
  position: fixed;
  z-index: 3000;
}
.modal-content {
  position: relative;
  z-index: 1; /* 在容器层级内有效 */
}

5.3 动态层级控制

function showModal() {
  const modal = document.querySelector('.modal');
  modal.style.zIndex = window.innerHeight + Math.random() * 1000;
}

六、总结与展望

通过本文的系统讲解，读者应已掌握：

1. z-index 的基础语法与核心规则
2. 层叠上下文对层级控制的深远影响
3. 实战中常见的疑难问题解决方案

建议开发者在项目中遵循以下原则：

• 始终为定位元素显式声明 position 属性
• 使用变量管理层级数值
• 定期审查层叠上下文边界

未来随着 CSS 子层叠（sublayers）等新特性的普及，层叠控制将更加灵活。掌握本文内容后，读者可进一步探索 CSS will-change 属性与层叠优化的关系，持续提升页面渲染性能。