z-index失效主因是轮播图父容器触发层叠上下文（如transform: translatez(0)或opacity: 0.99），导致内部元素z-index仅在局部生效；需检查共同祖先是否含opacity
轮播图内部元素 z-index 为什么总不生效
z-index 失效不是因为你设小了，而是层叠上下文被意外切断。比如 .carousel-inner 的父容器加了 transform: translateZ(0) 或 opacity: 0.99，就会创建新层叠上下文，导致内部 .carousel-item 的 z-index 只在自己内部比大小，压不过兄弟节点（如左右箭头）。
排查方法：打开浏览器开发者工具 → “Computed” 面板 → 查看遮罩层和轮播图片的最近共同祖先是否带 transform、filter 或 opacity 。临时解法是给该祖先加 <code>isolation: isolate；长期建议把 .carousel-control-prev 和 .carousel-control-next 的 DOM 节点提到和 .carousel 同级，统一由 body 管理层级。
必须确保：
- .carousel-inner 设 position: relative（作为层叠上下文锚点）
- 所有 .carousel-item 设 position: absolute 且初始 z-index: 1
- 控制按钮设 position: absolute + z-index: 2（不能低于图片层）
- 指示器（dots）设 z-index: 3，否则会被图片或按钮盖住
遮罩层盖不住轮播图怎么办
全屏遮罩盖不住轮播图，90% 是因为用了 position: absolute 却没管父容器定位，或者轮播容器本身触发了新的层叠上下文。
正确做法：
- 全屏遮罩必须用 position: fixed，配 top: 0; left: 0; width: 100%; height: 100%
- 不要依赖 html, body { height: 100% }，它在某些嵌套场景下会断链
- 遮罩层 DOM 必须放在 最底部，和轮播容器平级，避免被任何父容器的 transform 或 opacity 隔离
- 如果轮播图用了第三方库（如 Bootstrap），检查它是否对 .carousel 加了 transform —— 这会让它的子元素自动进入新层叠上下文，此时只能提级遮罩 DOM 或加 isolation: isolate
图片上叠加文字/按钮时遮罩干扰交互
直接给 <img> 设 opacity 或 background: rgba() 会导致上面的文字、按钮一起变淡甚至不可点击，这不是遮罩，是“降权”。
安全方案是用伪元素：
- 图片容器设 position: relative; overflow: hidden
- 写 .carousel-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); pointer-events: none; }
- 文字和按钮和 <img> 同级，用 position: absolute 定位，并显式设 z-index: 2
- 别漏写 content: ""，否则伪元素不渲染
- pointer-events: none 是关键，否则遮罩会拦截鼠标事件，导致按钮点不动
轮播图自动播放时遮罩闪一下
这是切换瞬间 DOM 重排导致的视觉抖动。常见于用 display: none/block 切换 .carousel-item —— 浏览器会触发回流，遮罩层若也靠 JS 动态显隐，就容易错拍。
稳定做法：
- 所有 .carousel-item 始终保持 position: absolute，用 opacity: 0/1 + transition: opacity 0.3s 切换
- 遮罩层不参与轮播逻辑，只响应用户操作（如点击弹窗）
- 若必须在轮播中显示 loading 遮罩（比如懒加载图片），用 visibility: hidden/visible 替代 display，避免重排
- 自动轮播定时器用 setInterval 单例管理，切换前先 clearInterval，防止多个定时器叠加导致节奏紊乱
轮播图的层级和遮罩问题，本质不是数值调大就能解决的，而是 DOM 结构、CSS 渲染层、JS 执行时机三者咬合的结果。最容易被忽略的是层叠上下文的隐式创建——一个 transform、一行 opacity: 0.99 就可能让整个 z-index 体系失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
