absolute定位元素通过z-index控制层叠顺序，z-index值越大越靠前；需注意定位属性缺失、层叠上下文限制及样式覆盖问题。
在使用 CSS 的 absolute 定位时，元素会脱离正常文档流，可以自由地放置在页面的任意位置。但当多个绝对定位元素发生重叠时，谁在上面、谁在下面，就需要用 z-index 来控制显示顺序。
absolute 定位与层叠上下文
设置了 position: absolute; 的元素会相对于最近的已定位祖先元素进行定位（没有则相对 body）。这类元素会生成一个“层叠上下文”的候选对象，但真正的层叠顺序由 z-index 决定。
注意：z-index 只对定位元素生效（即 position 为 relative、absolute、fixed 或 sticky）。
z-index 控制显示层级
z-index 的值越大，元素越靠前；值越小，越靠后。默认值为 auto，等效于 0，在同级中后来者居上。
立即学习“前端免费学习笔记（深入）”；
- 正数 z-index 元素显示在普通元素上方
- 负数 z-index 元素显示在普通元素下方（需父容器有定位且形成层叠上下文）
- 数值越大，层级越高
示例：
.box1 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background: blue;
z-index: 2;
}
这里 .box2 会显示在 .box1 上面，因为它的 z-index 更高。
常见问题与注意事项
有时候即使设置了 z-index，也不生效，原因可能如下：
- 缺少 position 属性：z-index 对 static 定位无效
- 层叠上下文限制：父元素创建了新的层叠上下文（如设置了 opacity、transform、z-index 为数值），子元素的 z-index 只在该父容器内比较
- 选择器优先级或样式覆盖：检查是否其他样式覆盖了 z-index 设置
比如两个 absolute 元素，一个父级 z-index: 1，另一个父级 z-index: 2，那么即使子元素设置 z-index: 999，也无法超过另一个父级的层级。
基本上就这些。只要记住：absolute 提供定位能力，z-index 决定谁在前面，而层叠上下文会影响比较范围。合理搭配就能精准控制页面层级。不复杂但容易忽略细节。
