用position: absolute+top:0+left:0+width/height:100%使图片叠于父容器左上角，父容器需设position: relative和明确高度，配合z-index与opacity切换，预加载图片并用object-fit: cover防变形。
绝对定位怎么让多张图片叠在同一个位置
关键不是“堆叠”，而是用 position: absolute 把所有 <img> 拉到父容器左上角，再统一设 top: 0; left: 0; width: 100%; height: 100%;。父容器必须设 position: relative，否则子元素的 absolute 会往上找最近的定位祖先，容易脱出视口。
常见错误是忘了给父容器加 position: relative，结果图片飞到整个页面左上角；或者没设 width/height: 100%，图片只显示原尺寸，看起来像没叠上。
- 父容器高度要明确（比如
height: 100vh），否则height: 100%失效 - 所有图片需同尺寸或设
object-fit: cover，避免拉伸变形 - 用
z-index控制切换时的显隐顺序，而不是靠 DOM 顺序
轮播切换时怎么避免闪屏或白边
闪屏主因是图片加载延迟或 CSS 过渡未对齐。别等 opacity 动画结束才换图，而是提前把下一张图的 opacity: 0 状态准备好，并确保它已加载完成（可用 img.onload 或 loading="eager"）。
白边通常来自图片未填满容器：检查是否漏了 width: 100%; height: 100%，或父容器有 padding/border，或图片本身比例和容器不一致导致 object-fit 裁剪留空。
立即学习“前端免费学习笔记（深入）”；
- 切换前预加载下一张图：
const nextImg = new Image(); nextImg.src = nextSrc; - 过渡用
opacity+transition: opacity 0.4s ease，别用display: none（会中断渲染流） - 确保所有图片都设
object-fit: cover和object-position: center，防止偏移
用 JavaScript 控制 z-index 切换的最小可行逻辑
不需要框架，三行 JS 就够：保留当前索引 currentIndex，每次切换时把当前图 z-index 设为 1、下一张设为 2，再交换索引。关键是用 z-index 配合 opacity，而不是靠 visibility 或 display 切换。
示例逻辑：
const imgs = document.querySelectorAll('.carousel-img');
function show(index) {
imgs.forEach((img, i) => {
img.style.zIndex = i === index ? '2' : '1';
img.style.opacity = i === index ? '1' : '0';
});
}
- 务必用
style.zIndex直接写内联样式，CSS 类切换可能有延迟 - 不要在循环里反复读取
offsetHeight等触发重排的属性 - 自动轮播记得用
setInterval+clearInterval管理，避免重复定时器
移动端 touch 滑动支持为什么经常失效
失效不是因为没写事件，而是 touchstart/touchmove/touchend 默认行为被浏览器拦截（比如缩放、滚动），或事件监听没加 { passive: false }。另外，position: absolute 图片如果没设 user-select: none，长按可能触发文本选中，干扰滑动判断。
- 给轮播容器加
touch-action: pan-y（允许垂直滚动但禁用水平缩放） - 监听
touchstart时立刻调用e.preventDefault()，否则后续touchmove不触发 - 计算位移用
e.touches[0].clientX，别用e.changedTouches（只在end时有值） - 滑动阈值建议设为
30px，太小易误触，太大不灵敏
vh 在地址栏收放时会跳变，object-fit 在旧 Android 上兼容性差。这些没法靠定位解决，得单独兜底。 
