z-index通过定位元素和层叠上下文控制堆叠顺序，需满足position非static且考虑父级上下文影响。1. 只有定位元素（relative、absolute等）才可使用z-index；2. 层叠上下文由根元素、fixed/sticky元素、transform或opacity等触发，形成独立层级组；3. 子元素层级受限于父级上下文，无法超越；4. 常见技巧包括为模态框设高z-index（如1000），导航栏设中等值（如10），背景设低值（如1）；5. 问题常因未设定位或父级上下文限制，解决需检查结构与继承关系。关键在于理解“定位+上下文”机制而非仅比较数值。
在CSS中，z-index 是控制元素堆叠顺序的关键属性，它决定了元素在Z轴（垂直于屏幕的方向）上的显示层级。但要正确使用 z-index，必须理解其工作条件和层叠上下文机制。
z-index 的基本规则
z-index 只对定位元素生效，也就是说，元素的 position 属性必须是 relative、absolute、fixed 或 sticky 才能使用 z-index 控制层级。
- 值为正整数时，层级高于普通元素
- 值为负整数时，层级低于普通元素（需注意父级层叠上下文）
- 值为 auto 时，不创建新的层叠上下文，层级由所在上下文决定
层叠上下文与堆叠顺序
z-index 不仅看数值大小，还受层叠上下文影响。每个层叠上下文是一个独立的“层级组”，子元素的 z-index 只在该组内比较。
以下情况会创建新的层叠上下文：
立即学习“前端免费学习笔记（深入）”；
- 根元素（html）自动创建
- position 值为 fixed 或 sticky 的元素（且 z-index 不为 auto）
- flex 或 grid 容器的子项，当 z-index 不为 auto
- opacity 小于 1 的元素
- transform、filter、clip-path 等属性被应用时
一旦创建了层叠上下文，其内部层级无法超越父级所处的上下文层级。
常见使用技巧
想要让某个元素始终置顶（如弹窗），可以这样设置：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
而页面中的导航栏、加载层等可分别使用不同层级：
- 背景层：z-index: 1
- 内容区：z-index: 2
- 顶部导航：z-index: 10
- 模态框：z-index: 100
- 全局提示：z-index: 1000
避免常见问题
有时设置了 z-index 却没效果，原因通常是：
- 元素没有定位（缺少 position: relative 等）
- 父元素层叠上下文限制了子元素层级
- 多个元素在同一上下文中，但 z-index 相同，此时按 DOM 顺序渲染（后写的在上）
解决方法是检查父级是否无意中创建了低层级上下文，或调整结构提升目标元素的上下文层级。
基本上就这些。掌握 z-index 的关键是理解“定位 + 层叠上下文”的组合逻辑，而不是单纯比数字大小。合理规划层级结构，能有效避免后期布局冲突。
