轮播图按钮被图片盖住、点击失效主因是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 顺序不同导致其中一个被盖。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 按钮必须用
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 开发者工具，用层叠面板逐层点开验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
