absolute定位使元素脱离文档流并可设置z-index控制层级，z-index值越大层级越高，但受层叠上下文限制，父级的层级决定子元素最大层级，需合理分层避免冲突。
在CSS布局中，absolute定位和z-index是控制元素层级关系的关键属性。当元素使用 position: absolute 脱离正常文档流后，可以通过 z-index 明确指定其在Z轴上的堆叠顺序。
absolute定位与层叠上下文
设置了 position: absolute 的元素会相对于最近的已定位祖先元素进行定位（即 position 为 relative、absolute、fixed 或 sticky 的父级）。但是否能通过 z-index 控制显示层级，还取决于是否建立了正确的层叠上下文。
- absolute 定位的元素默认可以使用 z-index 来提升或降低层级
- z-index 只在定位元素（非 static）上生效
- 若多个 absolute 元素重叠，z-index 值大的显示在上层
z-index 的数值规则
z-index 接受整数值，包括负数、0 和正数，值越大越靠前。
- 未设置 z-index 时，默认值为 auto，等效于 0（但在当前层叠上下文中不创建新层级）
- 设置为负数的元素会显示在普通元素下方，可用于背景装饰层
- 正数 z-index 提升层级，常用于模态框、下拉菜单等需要置顶的组件
常见使用场景示例
例如一个弹出提示框覆盖在其他内容之上：
立即学习“前端免费学习笔记（深入）”；
.tooltip {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
.modal {
position: absolute;
z-index: 2000;
}
这样 modal 总是显示在 tooltip 上方，因为它的 z-index 更高。
注意层叠上下文的限制
即使子元素设置了很高的 z-index，如果其父容器的层叠上下文层级较低，也无法超越外部更高层级的兄弟容器。
- 每个层叠上下文独立计算 z-index
- 父级的 z-index 限制了子元素的最大显示层级
- 避免过度使用高 z-index 数值，建议按功能分层管理（如：导航: 10，弹窗: 100，全局遮罩: 1000）
基本上就这些。只要记住：absolute 定位让元素脱离文档流，z-index 决定谁在上面，而层叠上下文决定了比较的范围。合理搭配使用，就能精准控制页面层级。不复杂但容易忽略细节。
