必须给父容器加position: relative，因为absolute元素会向上查找首个非static定位祖先，若无则锚定html根元素，导致图片随页面滚动错位；父容器设relative后才提供稳定定位上下文。
绝对定位是实现轮播图层叠显示最直接、可控性最强的方式，但必须配合相对定位的父容器，否则 top/left 会相对于 html 根元素偏移，导致错位。
为什么必须给父容器加 position: relative
绝对定位元素会向上查找第一个 position 不为 static 的祖先。如果轮播外层容器没设 position: relative，所有图片就会以整个页面为参考系定位，一旦页面有滚动或布局变化，图片就“飞走”。这不是 bug，是 CSS 定位机制本身决定的。
- 父容器（如
.carousel或.carousel-inner）必须声明position: relative - 子图片项（
.carousel-item或img）才可安全设position: absolute - 不推荐对
body或html加定位来“兜底”，这会污染全局布局
position: absolute 下如何控制显隐和层级
用绝对定位叠放图片后，显隐不能靠 display: none（会破坏定位流，导致指示器计算错位），而应统一用 opacity: 0 + z-index 控制视觉状态。
- 所有轮播项初始设
opacity: 0; z-index: 1; - 当前激活项额外加类（如
.active），设opacity: 1; z-index: 2; - 避免用
visibility: hidden，它仍占渲染空间，可能干扰按钮点击区域 - 过渡动画需加在
opacity和z-index上，否则切换时会有闪动
JS 切换时容易漏掉的 DOM 操作
单纯改 class 不够，必须同步更新 z-index 和确保旧项真正“退场”，否则多张图可能同时显示或堆叠错乱。
立即学习“前端免费学习笔记（深入）”；
- 每次切换前，先清除所有项的
.active类和z-index: 2 - 再给目标项加
.active并设z-index: 2，而不是只加类 - 用
getElementsByClassName或querySelectorAll获取全部项时，注意返回的是实时集合，循环中修改 class 可能影响后续索引 - 自动播放用
setInterval，但手动触发切换时要clearInterval再重置，否则定时器叠加会导致跳帧
绝对定位轮播最脆弱的一环不是 JS 逻辑，而是 CSS 层级和定位上下文是否被意外覆盖——比如某个中间容器加了 transform，会创建新的定位上下文，让子项突然“找不到爹”。上线前务必检查 DOM 结构中是否有未预期的 position 或 transform 父级。
