通过opacity和pointer-events控制交互时机，结合父容器管理层级与will-change优化性能，可实现平滑的层级切换效果。
在使用 CSS 过渡（transition）实现元素动画时，如果涉及到 z-index 控制的层级变化，可能会出现动画过程中层级错乱、视觉跳跃等问题。虽然 z-index 本身不支持过渡动画，但通过合理的结构设计和辅助属性控制，可以实现平滑的层级切换效果。
理解 z-index 与层叠上下文
z-index 只在定位元素（position: relative/absolute/fixed/sticky）上生效，并且受层叠上下文影响。当多个元素重叠时，浏览器根据层叠顺序决定谁在上谁在下。直接对 z-index 使用 transition 不会产生动画效果，因为它的值是整数，无法“渐变”。
常见问题：比如一个弹窗淡出时仍挡住背景内容，是因为其 z-index 立即降为 0，导致其他高 z-index 元素无法及时“接管”点击或显示优先级。
通过 opacity 和 pointer-events 控制交互时机
既然 z-index 不能过渡，可以通过控制透明度和交互能力来模拟自然的层级过渡：
立即学习“前端免费学习笔记（深入）”；
- 使用 opacity + transition 实现淡入淡出视觉效果
- 配合 pointer-events: none 在隐藏时关闭交互，避免误触
- 在 transition 结束后，再改变 z-index 或设置 display: none
示例代码：
.modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
z-index: 10;
transition: opacity 0.3s ease, visibility 0.3s;
}
.modal.active {
opacity: 1;
visibility: visible;
}
/* 隐藏时 pointer-events 自动失效 */
.modal {
pointer-events: none;
}
.modal.active {
pointer-events: auto;
}
利用父容器统一管理层级
将 z-index 设置在父级容器上，子元素共享层叠环境。动画期间保持父容器 z-index 不变，仅对内部元素做状态切换，可避免频繁修改层级带来的渲染问题。
例如轮播图中当前项“置顶”，不要每个 item 单独设不同 z-index，而是给 active 的 item 容器统一加类：
.carousel-item {
position: absolute;
z-index: 1;
opacity: 0.6;
transition: opacity 0.3s;
}
.carousel-item.active {
z-index: 2;
opacity: 1;
}
这样层级提升只发生在激活瞬间，配合 opacity 过渡，视觉更连贯。
结合 will-change 提升性能
对于频繁进出视野的元素（如模态框、侧边栏），提前告知浏览器该元素将发生变化，有助于优化合成层：
.sidebar {
position: fixed;
right: 0;
width: 300px;
transform: translateX(100%);
transition: transform 0.3s ease;
will-change: transform;
}
.sidebar.open {
transform: translateX(0);
}
will-change 让浏览器提前创建独立图层，减少重排重绘开销，间接提升层级切换的流畅度。
基本上就这些。关键在于：不依赖 z-index 过渡，而是用 opacity、visibility、transform 等可动画属性引导视觉流向，再合理安排 z-index 的切换时机，就能实现自然且稳定的层级变化体验。
