轮播图被遮挡是z-index层级设置不当所致，需确保容器有position属性、避免父级创建新层叠上下文，并按需设置合理z-index值（如.carousel设999、.carousel-control-prev设2、.carousel-indicators设3）。
轮播图元素被其他内容遮挡怎么办
轮播图显示不全、按钮点不了、图片被导航栏或弹窗盖住——本质是 z-index 层级没设对，不是轮播逻辑出问题。关键不在 JS 是否跑通，而在 CSS 的堆叠上下文是否被意外切断。
为什么给轮播容器加 z-index 没用
常见误区：直接给 .carousel 加 z-index: 999，但毫无效果。这是因为：z-index 只对「定位元素」生效（即 position 值为 relative、absolute、fixed 或 sticky）；且若父容器建立了新的层叠上下文（比如有 opacity: 0.99、transform: translateZ(0)、will-change: transform），子元素的 z-index 就只能在该容器内部比较，无法突破到全局。
- 检查轮播最外层容器是否设置了
position: relative（必须有，否则z-index无效） - 排查父级（如
header、.layout、#app）是否带transform或opacity—— 这些会创建隔离的层叠上下文 - 用浏览器开发者工具的「Layers」面板（Chrome）或「Computed」标签页查看实际堆叠顺序
z-index 数值设多大才安全
没有统一“安全值”，只看当前页面已有的层级结构。典型参考值：
.header { z-index: 100; }
.modal { z-index: 1000; }
.carousel { position: relative; z-index: 999; }
如果轮播要盖过 .header 但不压住 .modal，就取中间值（如 999）。切忌无脑写 999999，容易和后续组件冲突；也不建议用负数（除非明确要沉底）。
立即学习“前端免费学习笔记（深入）”；
轮播内部元素（如左右箭头、指示器）层级错乱
箭头点击失效、指示器被图片盖住，往往因为内部结构未正确分层。需确保：
- 轮播图片区域（
.carousel-inner）设z-index: 1 - 控制按钮（
.carousel-control-prev）设z-index: 2，且position: absolute - 指示器（
.carousel-indicators）设z-index: 3，避免被按钮遮挡 - 所有绝对定位元素的
top/left必须配合z-index使用，否则可能脱离预期位置
层级不是孤立设置的，是一整套相对关系。一旦某个环节漏了 position 或被父级层叠上下文锁死，整个轮播的视觉和交互就会断层。
