使用 position: relative 使元素脱离文档流并激活 z-index；2. 通过 z-index 数值控制层叠顺序，数值大者在上；3. 结合 top、left 调整位置实现视觉重叠，常用于卡片、模态框等场景。
要实现元素的叠加效果，关键在于使用 position: relative 配合 z-index 属性来控制元素在垂直于屏幕方向上的堆叠顺序。下面详细说明如何操作。
1. 设置 position: relative
默认情况下，HTML 元素是按照文档流排列的，无法通过 z-index 控制层级。必须先将元素的定位方式设为 relative（或 absolute、fixed 等），z-index 才会生效。
示例：
.box {
position: relative;
width: 200px;
height: 200px;
background: rgba(255, 0, 0, 0.5);
}
2. 使用 z-index 控制堆叠顺序
z-index 的值越大，元素越“靠前”，会覆盖 z-index 值较小的元素。值可以是正数、负数或 0。
示例：让一个盒子盖在另一个上面
.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: relative;
top: -50px; /* 向上移动，产生重叠 */
z-index: 2; /* 数值更大，显示在上面 */
}
3. 实际叠加布局技巧
常见于卡片、模态框、标签角标等设计场景。
立即学习“前端免费学习笔记（深入）”；
- 确保所有参与叠加的元素都设置了 position: relative（或其他非 static 定位）
- 用 top、left 等微调位置，制造视觉重叠
- 通过 z-index 明确谁在上、谁在下
- 负的 z-index 可以让元素“沉”到背景层（需父容器有定位）
基本上就这些。只要记住：relative 开启定位上下文，z-index 决定前后顺序，配合位移属性就能灵活实现各种叠加效果。
