全屏背景幻灯片里文字被遮挡，z-index 不生效？
根本原因不是 z-index 写得不够大，而是父容器没形成层叠上下文。即使给文字加了 z-index: 9999，只要它的某个祖先元素（比如 .slide 或 body）没设 position: relative、absolute 或 fixed，那这个 z-index 就完全不参与计算。
常见错误现象：z-index: 9999 的文字在 Chrome 看正常，Safari 里却总被背景图盖住；或者切换幻灯片时文字突然闪一下再出现。
- 确保文字直接父容器（如
.slide-content）有position: relative或更明确的定位值 - 背景图容器（如
.slide-bg）用position: absolute+z-index: 1，文字容器用z-index: 2 - 避免在
body或html上乱设z-index—— 它们默认不是层叠上下文，强行加会触发意外重绘
响应式下背景图拉伸变形，background-size 怎么选？
background-size: cover 和 contain 行为差异很大，不是“越大越好”。幻灯片要全屏填充且不露白边，必须用 cover；但要注意它会裁剪图片边缘，文字区域如果靠近四角就可能被切掉。
使用场景：手机竖屏下宽高比突变，cover 可能裁掉标题区域；桌面横屏下又可能让文字离顶部太远。
立即学习“前端免费学习笔记（深入）”；
- 文字区域固定用
position: absolute+top: 20%这类相对定位，别依赖绝对像素值 - 配合
background-position: center center减少偏移感 - 如果设计要求关键文字必须完整显示（比如 logo 或主标题），改用
background-size: 100% 100%+background-repeat: no-repeat，但需提前确认图片分辨率足够覆盖最大视口
幻灯片切换时文字闪烁或跳动
本质是浏览器重排（reflow）和合成层（compositing layer）没对齐。CSS 动画若触发 layout，哪怕只动 opacity，在低端设备上也可能抽帧。
性能影响：iOS Safari 对 transform + opacity 合成优化最好，但一旦混用 top、left 或 margin，就会退回到软件渲染，卡顿明显。
- 文字入场动画只用
transform: translateY()和opacity，禁用top/left - 给文字容器加
will-change: transform, opacity（仅切换前瞬间加，切完立刻移除，避免内存泄漏） - 避免在
@keyframes里写多于两个属性变化 —— 比如同时动transform和color，颜色变化会强制重绘整层
移动端 touch 操作后 z-index 错乱
iOS Safari 在 touchend 后会短暂提升当前元素的层叠权重，导致刚点过的幻灯片文字“浮”在其他层上面，松手后才恢复正常。这不是 bug，是系统级手势反馈机制。
兼容性影响：只出现在 iOS 15+ 的 WebKit 内核，Android Chrome 不会出现。
- 给所有幻灯片容器加
-webkit-transform: translateZ(0)，强制创建独立合成层 - 避免用
:active伪类直接改z-index—— 改用 class 切换 +transform微调视觉层级 - 如果用了第三方轮播库（比如 Swiper），检查是否启用了
touchRatio: 1和resistanceRatio: 0，这两个参数会影响 touch 事件结束后的层叠状态同步
真正麻烦的是多层绝对定位叠加时，某一层用了 transform: scale(0.99) 这种“伪 hack”来触发硬件加速 —— 它会让 z-index 计算在部分 Android 机型上失效，得靠加空的 backface-visibility: hidden 来兜底。
