轮播图内部元素z-index需按职责分层：.carousel设position:relative；.carousel-inner设z-index:1；箭头和指示器均设position:absolute+z-index:2，且须与.carousel-inner同级，避免stacking context干扰。
轮播图内部元素 z-index 怎么设才不打架
轮播图里箭头、指示器、图片经常互相遮盖，根本原因是没按职责分层。必须让每个区域有明确的 z-index 顺序，且所有相关元素都得配 position 才生效。
-
.carousel外层容器不用设z-index，但必须有position: relative（否则子元素的绝对定位会找更外层） -
.carousel-inner或.carousel-track设z-index: 1，它是图片层，不能被按钮盖住 -
.carousel-control-prev和.carousel-control-next必须设position: absolute+z-index: 2，否则鼠标点不到 - 指示器（
.carousel-indicators）也得是position: absolute，z-index: 2或更高，但别超过 3——太高可能挡住全屏弹窗
常见错误是给所有元素都写 z-index: 999，结果谁先渲染谁在上，完全不可控。
为什么箭头点击失效？大概率是层级或 pointer-events 搞错了
箭头按钮看不见、点不动，90% 是因为被图片盖住了，剩下 10% 是 pointer-events: none 残留或父容器溢出裁剪。
- 检查
.carousel是否漏了overflow: hidden—— 没加的话，图片会撑出来盖住按钮 - 确认箭头是否在
.carousel内部，且是直接子元素；如果嵌套在.carousel-inner里，它会被z-index: 1的图片层压住 - 别给箭头加
pointer-events: none，除非你真想禁用它；有些重置 CSS 会全局设这个，要单独覆盖回来 - 移动端测试时注意：
:hover不触发，得补:active或监听touchstart
指示器被图片盖住，但明明写了 z-index 更高？
写了 z-index: 10 还被盖，说明它和图片不在同一个 stacking context 里。根源常出在父容器的 transform、opacity < 1 或 will-change 上。
立即学习“前端免费学习笔记（深入）”；
- 如果
.carousel-track用了transform: translateX()，它就创建了新 stacking context，里面所有子元素的z-index只在这个上下文内有效 - 此时指示器必须放在
.carousel下，和.carousel-track平级，不能包在它里面 - 避免给
.carousel加opacity: 0.99或transform: translateZ(0)——这些都会无意中创建 stacking context - 用浏览器开发者工具的“Layers”面板看 stacking context 分布，比猜快得多
移动端 touch 区域太小，点不中箭头？
PC 上看着能点，手机上总点歪，不是样式问题，是触控响应区不够大。
- 箭头按钮默认尺寸太小，iOS Safari 要求最小触控区 44×44px，Android 建议 ≥ 48×48px
- 别只调
font-size或width/height，用padding扩展可点击区域，同时保持图标视觉大小不变 - 加
touch-action: manipulation，减少 300ms 延迟，让点击更跟手 - 确保按钮没有被其他元素（比如伪类
::before）意外覆盖，用“元素检查器”选中后看盒模型
层级问题从来不是单点配置能解决的，它是一整套结构约束：容器定位方式、stacking context 边界、触控可用性，三者缺一不可。最容易被忽略的是 stacking context 的隐式创建——一个 transform 就能让所有 z-index 重新洗牌。
