能，必须用position: absolute叠图并设父容器position: relative、top:0;left:0;否则opacity动画会错位闪帧；display:none会触发重排、破坏布局且无法过渡。
必须用 position: absolute 把所有图片叠在同一位置，否则 opacity 动画会留白、错位或闪帧。
为什么不能只靠 display: none 切换？
用 display: none 会破坏文档流，导致容器高度塌陷；轮播区域突然收缩，水印层或文字框可能错位甚至消失。更严重的是，display 变化不触发 CSS 过渡，无法实现淡入淡出效果。
-
display切换是瞬间的，没有过渡时间可设 - 每次隐藏/显示都会触发重排（reflow），性能比
opacity+transform差 - 若父容器没设
min-height或固定尺寸，轮播区可能“跳动”
position: absolute 的必要搭配项
单写 position: absolute 不够，必须配合父容器和偏移控制，否则图片会跑到视口左上角。
- 父容器必须设
position: relative（或absolute/fixed），作为定位上下文 - 每张图需统一设置
top: 0; left: 0; width: 100%; height: 100% - 推荐加
transform: translateZ(0)强制 GPU 加速，避免 opacity 动画卡顿 - 务必设
overflow: hidden在父容器上，防止边缘溢出
常见错位现象与修复方式
图片没对齐、水印偏移、首帧闪一下——八成是定位上下文或尺寸继承出问题。
立即学习“前端免费学习笔记（深入）”；
- 如果图片高度不一致，
height: 100%会失效 → 改用min-height: 100%或父容器设固定高 - 水印层错位 → 检查它是否也用了
position: absolute，且父容器是同一个relative容器 - 首帧闪白 → 所有图片初始
opacity: 0，但第一张没在动画起始点设opacity: 1→ 关键帧里补上0% { opacity: 1 } - 动画不同步 → 每张图的
animation-delay必须严格按周期等分，比如 3 张图总周期 9s，延迟分别是0s、3s、6s
绝对重叠布局看着简单，真正稳的关键在于：父容器定位上下文是否唯一、尺寸是否可控、所有子元素是否共享同一套 top/left/width/height 规则。漏掉任意一环，轮播就会在 Safari 或低配安卓机上掉帧或错位。
