z-index需定位元素才生效，且受层叠上下文限制，父元素创建上下文后子元素z-index仅在内部比较；过渡动画中z-index无法平滑变化，应通过类切换实现层级提升，避免因transform、opacity等属性意外创建层叠上下文导致层级混乱。
在使用CSS过渡（transition）和z-index控制元素层级时，虽然两者功能独立，但在实际开发中结合使用容易出现意料之外的视觉效果或动画问题。关键在于理解它们的渲染机制和触发条件，避免层级错乱或动画失效。
1. z-index 只在定位元素上生效
要使z-index起作用，元素必须是定位元素（即position值为relative、absolute、fixed或sticky）。如果对一个静态定位（position: static，默认值）的元素设置z-index，该设置将被忽略。
- 确保需要控制层级的元素设置了正确的
position - 例如：.box { position: relative; z-index: 10; } 才能正确参与层叠上下文比较
2. 层叠上下文影响 z-index 的实际表现
z-index并非全局比较，而是受“层叠上下文”限制。父元素创建了新的层叠上下文后，其子元素的z-index只在该上下文中有效。
- 常见创建层叠上下文的方式包括：
opacity < 1、transform非none、filter非none、will-change等 - 若父元素A的
z-index: 1，父元素B的z-index: 2，即使A的子元素设置z-index: 999，它仍会显示在B之下
3. 过渡动画中 z-index 的时机控制
当希望某个元素在动画过程中“浮起”到最上层（如模态框、悬浮卡片），不能仅依赖z-index的过渡，因为z-index本身不支持平滑过渡（它是离散值）。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：通过类切换来控制
z-index的突变，配合transition用于其他可动画属性（如transform、opacity） - 示例：鼠标悬停时提升卡片层级
.card { position: relative; transition: transform 0.3s ease; z-index: 1; } .card:hover { transform: translateY(-10px); z-index: 10; /* 虽然不会过渡，但会立即生效 */ }
4. 避免因 transform 或 opacity 触发不必要的层叠上下文
使用transition常伴随transform或opacity变化，而这些属性可能意外创建新的层叠上下文，导致z-index层级关系混乱。
- 比如两个同级弹窗，一个用了
opacity: 0.95做淡入，它可能被提升到另一个未透明的弹窗之下 -
解决方法：统一管理
z-index层级体系，或避免在关键组件中使用会创建层叠上下文的属性 - 必要时可用
will-change提前规划渲染层，但需谨慎使用
基本上就这些。理解z-index的层叠规则和transition的触发边界，能有效避免界面中元素“穿模”或动画层级跳跃的问题。不复杂但容易忽略。
