轮播图按钮被图片盖住、点击失效主因是z-index层级配置错误：.carousel-inner需设position:relative+z-index:1作为基准层，左右按钮（.carousel-control-prev/.next）须设position:absolute+z-index:3且与.carousel-inner同级，指示器（.carousel-indicators）z-index设2并避免overflow:hidden裁剪。
轮播图里按钮被图片盖住、点击失效，基本就是 z-index 没配对，不是 JS 逻辑问题，是 CSS 层级写错了。
为什么 carousel-inner 要设 z-index: 1
它不是“最高层”，而是整个轮播视觉流的基准平面。所有图片项（.carousel-item）默认堆在它内部，如果不给 .carousel-inner 显式设 z-index，它会按文档流自然层叠，一旦父容器或兄弟元素有定位+z-index，就容易被压住。
-
.carousel-inner必须带position: relative或absolute才能触发z-index生效 - 设
z-index: 1是为了确保它高于轮播容器（.carousel）的背景色或边框，避免被自身容器遮挡 - 不设值或设
auto时，它的层叠上下文不独立，子元素的z-index可能失效
.carousel-control-prev 和 .carousel-control-next 的 z-index 至少得是 2
它们必须浮在图片之上，且不能和指示器（.carousel-indicators）打架。常见翻车点是把左右按钮和指示器都设成 z-index: 2，结果因 DOM 顺序不同导致其中一个被盖。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 按钮必须用
position: absolute定位，否则z-index不起作用 - 推荐按钮设
z-index: 3，指示器设z-index: 2，明确高低关系 - 如果按钮用了
transform（比如 translateX），记得检查是否意外创建了新层叠上下文——这会让它的z-index相对于父容器重新计算
指示器（dots）被盖住？先查它的父容器有没有 overflow: hidden
指示器常放在 .carousel-indicators 里，而这个容器如果被错误地塞进 .carousel-inner 内部，就会被 overflow: hidden 截断，或者因层叠上下文被压制。
立即学习“前端免费学习笔记（深入）”；
-
.carousel-indicators必须是.carousel的直接子元素，和.carousel-inner并列 - 它本身不能设
overflow: hidden，否则小圆点可能被裁掉 - 若用了
display: flex布局指示器，要确认父容器没设align-items: center导致垂直偏移，让点击热区错位
最易忽略的是：移动端 Safari 对 z-index 的解析更严格，哪怕只差 1 级，也可能完全不可点。别依赖“看起来没问题”，真机连上 Safari 开发者工具，用层叠面板逐层点开验证。
