指示器用 position: absolute 定位到底部时，父容器必须设 position: relative，否则 bottom 会相对于最近定位祖先（如 body）计算，导致飘出轮播图；同时需设置 z-index 或 transform 等触发层叠上下文，避免被图片遮盖。
指示器用 position: absolute 定位到底部时，父容器必须设 position: relative
否则 bottom 会相对于最近的定位祖先（可能是 body）计算，导致指示器飘到页面底部而非轮播图底部。常见错误是只给 .indicators 加 absolute，却忘了给外层 .carousel 加 relative。
实际写法示例：
.carousel {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
-
bottom: 20px控制距轮播图底边距离，不是距视口底边 -
left: 50%+transform: translateX(-50%)是水平居中最稳妥的方式，比margin: 0 auto更可靠（后者在absolute下无效） - 若轮播图高度不固定（如响应式），
bottom值建议用rem或em，避免硬编码px
指示器圆点用 display: flex 排列时，gap 比 margin 更安全
用 margin-right 给每个圆点加间距，最后一个元素会多出多余空白；而 gap 只作用于项目之间，不会溢出。
同时注意圆点尺寸和背景色要兼顾可访问性：
立即学习“前端免费学习笔记（深入）”；
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: background 0.2s;
}
.indicator.active {
background: #fff;
}
- 激活态用纯白
#fff，对比度更高，WCAG AA 级别达标 - 未激活态用带透明度的白色（
rgba(255,255,255,0.6)），比灰色更柔和且不易被误判为禁用 - 务必加
cursor: pointer，否则用户无法直观判断可点击
移动端触摸场景下，bottom 值需配合 min-height 防止被虚拟键盘遮挡
当轮播图位于表单附近、或页面有输入框时，iOS Safari 的虚拟键盘弹出会压缩视口高度，导致 bottom: 20px 实际变成“距压缩后视口底边20px”，指示器可能被顶出可视区。
- 解决方案：给轮播容器加
min-height: 400px（根据设计稿最小高度设定） - 或改用
padding-bottom预留空间，把指示器放在 padding 区内（需配合box-sizing: border-box） - 极端情况可监听
resize事件动态调整bottom，但纯 CSS 场景下优先靠布局容错
z-index 不生效？检查是否遗漏了层叠上下文创建条件
即使写了 z-index: 10，指示器仍被图片遮盖，大概率是因为父容器没触发层叠上下文——position: relative 本身不自动创建，还需满足以下任一条件：
- 设置了
z-index值（非auto） - 设置了
opacity小于 1 - 设置了
transform（哪怕只是translateZ(0)）
最简方案是在 .carousel 上加 z-index: 1，确保它与子元素形成明确层级关系。否则所有 absolute 子元素会按源顺序堆叠，图片在前、指示器在后，就白写了。
