前端零基础入门：巧用 z-index 实现元素阶梯层叠效果

最新推荐文章于 2026-06-26 10:37:20 发布

原创最新推荐文章于 2026-06-26 10:37:20 发布 · 174 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

在前端页面开发中，我们不止会遇到平面布局，经常需要实现元素叠加、层级展示的视觉效果，比如弹窗置顶、悬浮按钮、卡片层叠、阶梯展示等场景。

很多新手同学会疑惑：多个绝对定位的元素重叠时，谁在上、谁在下？如何手动控制层叠顺序？

今天就用一段极简、规范的实战代码，带大家彻底搞懂 CSS 层叠核心属性 z-index，手把手实现经典的三色阶梯层叠效果，看完即可上手！

本次案例我们设置三个大小完全一致的方块盒子，仅通过定位偏移 + 层级控制，实现阶梯层叠效果：

视觉上呈现依次右下偏移、层层叠加的标准阶梯效果，完美诠释 CSS 层叠规则。

以下代码无冗余、格式规范，复制即可直接在浏览器打开运行，效果完全一致：<!DOCTYPE<html lang="<head<meta charset="UTF-8"> 层叠</meta>

/* 公共样式：统一三个盒子尺寸和定位方式 */ .box { width: 200px; height: 200px; position: absolute; }

/* 红色盒子：最底层 z-index: 1 */ .box1 { background: #f8b4b4; z-index: 1; }

/* 灰色盒子：中间层向右下偏移 30px z-index: 2 */ .box2 { background: rgba (190, 190, 190, 0.5); left: 30px; top: 30px; z-index: 2; }

/* 绿色盒子：最顶层向右下偏移 60px z-index: 3 */ .box3 { background: #4cd964; left: 60px; top: 60px; z-index: 3; }

</head<body></body>

代码中父容器 .wrap 设置了 position: relative，子盒子统一设置 position: absolute。

这是前端绝对定位的黄金搭配：

三个盒子宽高完全一致，我们通过公共类 .box 统一设置宽高和定位，避免重复写代码，符合代码复用、精简规范的开发原则，是企业开发的常用写法。

三个盒子初始位置完全重合，通过不同的偏移值打造阶梯效果：

z-index 是专门控制定位元素层级的属性，也是本次案例的核心，记住核心规则：

生效前提：元素必须设置了定位（relative/absolute/fixed/sticky），默认静态定位 static 下 z-index 无效
数值规则：数值越大，层级越高，元素越靠上显示
本案例层级：z-index:1(红)< z-index:2(< z-index:3(绿)
透明效果：灰色盒子使用 rgba 颜色模式，设置 0.5 透明度，可以清晰看到下层元素，更直观展示层叠关系