z-index 控制 absolute 元素层级，但需注意层叠上下文的影响。1. z-index 值越大层级越高，仅对定位元素生效；2. 层叠上下文限制 z-index 作用范围，父级创建上下文后子元素层级受限；3. 确保置顶元素有足够高的 z-index 并避免父级低层级上下文干扰，合理使用开发者工具调试。
在使用 position: absolute 定位元素时，元素的堆叠顺序（即谁在上、谁在下）由 z-index 属性控制。但要注意，z-index 并不是唯一影响层级的因素，还需要理解层叠上下文（stacking context）的作用。
1. 使用 z-index 控制叠加层级
z-index 是控制绝对定位元素前后层级的核心属性。它只对已定位元素（如 position 为 relative、absolute、fixed 或 sticky）生效。
常见用法：- 值越大，元素越靠前显示
- 值越小，越靠后
- 默认值为 auto，相当于 0
- 可以是负数，表示在普通内容之下
示例：
.element1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.element2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 2; /* 会显示在 element1 上面 */
}
2. 层叠上下文的影响
z-index 的行为受层叠上下文限制。一旦某个元素创建了新的层叠上下文，它的子元素的 z-index 只能在该上下文中比较，无法与外部元素直接竞争层级。
立即学习“前端免费学习笔记（深入）”；
哪些情况会创建新的层叠上下文？
- 根元素（html）
- position 不为 static 且 z-index 为数值（非 auto）
- flex 或 grid 容器的子项（若 z-index 不为 auto）
- opacity 小于 1
- transform、filter、will-change 等属性触发时
这意味着：一个 z-index: 999 的元素，如果其父容器创建了层叠上下文且层级较低，可能仍会被 z-index 更小但处于更高层叠上下文中的元素覆盖。
3. 实际控制建议
要确保 absolute 元素正确显示在最上层，需综合考虑以下几点：
- 给需要置顶的元素设置较高的 z-index，如 10、100、9999（根据项目结构合理设定）
- 检查父级是否无意中创建了低层级的层叠上下文
- 避免滥用极高 z-index（如 99999），保持结构清晰
- 可借助浏览器开发者工具查看层叠结构和 z-index 计算结果
基本上就这些。关键是理解 z-index 和层叠上下文的关系，而不是只看数值大小。
