90%的轮播图指示器不居中、错位或被遮挡，是因为父容器未设position: relative，导致absolute定位的指示器相对于body等祖先元素计算bottom值；正确做法是给.carousel加relative，并用left: 50%+transform: translatex(-50%)水平居中，避免margin或text-align失效。
轮播图指示器不居中、错位、被遮挡，90% 是因为父容器没设 position: relative，或者用了 margin 代替 transform 居中。
为什么 position: absolute 指示器总飘到页面底部？
指示器用 bottom: 20px 却没出现在轮播图下方，是因为它默认相对于最近的「已定位祖先」计算位置——如果外层 .carousel 没设 position: relative，浏览器就一路往上找，最终落到 body 或 html 上，导致指示器脱离轮播容器。
- 必须给轮播最外层容器（如
.carousel）显式加position: relative -
.indicators才能以它为基准定位，bottom和left才有意义 - 别依赖「看起来没加也好像行」——图片加载延迟、JS 动态插入、SSR 渲染顺序都可能暴露这个问题
怎么让圆点水平居中又不依赖固定宽度？
用 text-align: center 或 margin: 0 auto 对 position: absolute 的指示器无效；用 margin-left: -XXpx 算死宽度更不可靠——圆点数量动态增减时立刻崩坏。
- 正确写法：
left: 50%+transform: translateX(-50%) - 圆点容器本身用
display: flex+justify-content: center更稳妥（尤其当指示器不绝对定位时） - 避免对每个圆点单独写
margin-right：最后一个元素会多出空白；改用gap: clamp(8px, 3vw, 16px)，弹性且干净
指示器高亮不同步？别怪 CSS，先看状态谁在管
CSS 无法监听 transform 值变化，也无法感知 JS 控制的滑动进度。所谓「指示器自动跟着动」，本质是 JS 在切换图片后，手动给对应圆点加 .active 类——CSS 只负责渲染这个类。
- 纯 CSS 轮播可用
input[type="radio"]+:checked ~ .dot:nth-child(n)实现同步，但 HTML 结构必须严格满足：所有input在前，.carousel-track居中，.dots在最后 - JS 轮播中，切页逻辑必须同时操作 DOM class，不能只改
transform - 慎用
opacity做高亮态：它会让:hover也变淡；优先用background-color或box-shadow
Safari 上圆点闪烁或错位怎么办？
Safari 对 transform 和 will-change 的触发时机更敏感，尤其在频繁 class 切换或配合 opacity 动画时，容易重绘抖动。
- 只在真正有动画的容器上加
will-change: transform，别加在每个.dot上 - 避免在同一个
transition里混写background-color和transform，Safari 可能不同步重绘 - 确保轮播容器宽高稳定：图片没设
width/height或缺失aspect-ratio会导致加载后回流，牵连指示器跳动
指示器最难的不是画几个圆点，而是把「参照系」「状态源」「渲染节奏」三者对齐——尤其是 position: relative 缺失和 Safari 的重绘策略，这两个点最容易被跳过，却直接决定是否上线即翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
