必须设父容器 position: relative 且显式 height，所有图片 top:0 left:0 width:100% height:100% + object-fit:cover + object-position:center，切换仅用 zindex 和 opacity 内联控制，预加载下一张图 onload 后再切换，避免重排、闪屏、错位。
直接用 position: absolute + z-index 实现轮播，不是“能跑就行”，而是要避开重排、闪屏、错位这三类高频崩溃点。核心不在于堆叠多少层，而在于控制权是否收在 JS 手里、样式是否可预测。
父容器必须设 position: relative 且高度明确
这是最常被跳过的前提。如果父容器没设 position: relative，所有 position: absolute 的图片会向上找最近的定位祖先——大概率是 body，结果整排图飞到页面左上角，连滚动都看不到。
- 高度必须显式声明，比如
height: 100vh或固定像素值；height: 100%在无继承高度的上下文中会失效 - 加
overflow: hidden防止图片溢出或滚动条意外出现 - 别用
min-height代替height——轮播切换时若内容撑高，会导致布局抖动
所有图片统一用 top: 0; left: 0; width: 100%; height: 100%
不是靠 DOM 顺序或 margin 调位置，而是强制所有图片锚定到父容器左上角，再用 z-index 和 opacity 控制显隐。漏掉任一属性，就会出现原图尺寸残留、白边、偏移等“像没叠上”的假象。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
object-fit: cover必须加，否则不同比例图片拉伸变形或留黑边 -
object-position: center配合cover确保关键区域居中裁剪 - 避免用
background-image替代<img>——无法监听load事件，预加载和错误 fallback 都难做
切换逻辑只操作 style.zIndex 和 style.opacity
别写 class 切换再配 CSS 规则，也别用 display: none 或 visibility: hidden。前者触发重排，后者让元素仍占渲染树资源；而内联 zIndex + opacity 是纯合成层操作，GPU 可加速。
- 当前项设
zIndex = 2+opacity = 1，其余统一设zIndex = 1+opacity = 0 - 过渡只写
transition: opacity 0.4s ease，别加z-index过渡——它不支持动画，强行写只会让切换卡顿 - 自动轮播用
setInterval，但每次触发前先clearInterval再重设，防止定时器叠加导致跳帧
预加载下一张图并确保 onload 完成后再切换
闪屏的根因不是 CSS 动画慢，而是下一张图还没加载完就切了 opacity。用户看到的是透明间隙，不是淡入效果。
- 切换前执行：
const nextImg = new Image(); nextImg.src = nextSrc; - 等
nextImg.onload触发后再执行显示逻辑，而不是靠loading="eager"猜浏览器行为 - 加个超时兜底：
nextImg.onerror或 3 秒后 fallback 到占位图，避免无限等待 - 别在循环里读
offsetHeight或getBoundingClientRect()——这些会强制同步回流，轮播一卡就是整秒
真正难的不是写出能切图的代码，而是让每张图都在「已加载+已定位+已合成」状态下被唤起。z-index 只是开关，背后是加载、布局、绘制三层流水线的协同。漏掉任意一层，用户看到的就是白屏、跳变或卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
