z-index 失效主因是渐变容器意外创建层叠上下文，如媒体查询中 transform/opacity/filter 触发；应移除冗余样式、提升容器定位与 z-index，或用伪元素分离背景与内容。
背景渐变导致子元素 z-index 失效
Bootstrap 4 的 .bg-gradient-* 类（如 .bg-gradient-primary）本质是通过 background-image: linear-gradient(...) 实现的，它本身不触发层叠上下文——但问题常出在你为了“让渐变响应式”而加的额外样式上。比如在媒体查询里补了 transform: scale(1)、opacity: 0.99 或 filter: blur(0)，这些都会让父容器悄悄创建新层叠上下文，把内部所有带 z-index 的子元素（如按钮、下拉菜单）锁死在里面。
常见现象：导航栏用了 .bg-gradient-dark，里面放了个 .dropdown，结果下拉菜单被截断或完全不可见；或者固定定位的悬浮按钮在渐变背景区域上点不动。
- 用 Chrome DevTools → Elements 面板选中渐变容器（比如
.navbar），右侧 «Layout» 区域看是否标着 “Stacking context: Yes” - 如果标了，逐级往上点父节点，找到第一个触发点（大概率是某条媒体查询里的
transform或opacity） - 删掉那条规则，或改用更安全的替代方案：比如用
will-change: transform换掉transform: translateZ(0)，或直接删掉无意义的scale(1)
响应式断点中 .bg-gradient-* 被覆盖或失效
Bootstrap 4 的渐变类没有内置响应式变体（不像 .d-none .d-md-block），所以很多人会自己写媒体查询覆盖背景，例如：
@media (max-width: 767.98px) {
.hero-section {
background-image: linear-gradient(135deg, #007bff, #28a745);
}
}
问题在于：如果这个 .hero-section 同时有 position: relative 且没设 z-index，它默认是 z-index: auto，层级天然低于后续出现的 .modal（z-index: 1050）或 .dropdown-menu（z-index: 1000）。更糟的是，某些 CSS 预处理器会把你的媒体查询规则插入到 Bootstrap 原始 CSS 之后，导致渐变被后面加载的其他背景色覆盖。
- 检查 DevTools 中该元素的 «Computed» 标签页，确认最终生效的
background-image是不是你写的那条 - 避免在渐变容器上同时设
background-color—— 它会盖住渐变，尤其当background-color是从其他 class（如.bg-dark）继承来的 - 若必须用媒体查询控制渐变，把规则写在 Bootstrap CSS 引入之后，并加足够权重：
.hero-section.bg-gradient-responsive比单纯.hero-section更可靠
渐变容器内 fixed 元素被“吸”进背景层
iOS Safari 和部分 Android 浏览器对 position: fixed 元素 + 渐变背景组合特别敏感。不是 z-index 数值不够，而是浏览器把 fixed 元素的定位基准“锚定”到了渐变容器的边界上（尤其当容器有 overflow: hidden 或 transform 时），造成视觉上像被背景“吞掉”了。
- 给渐变容器显式加
transform: translateZ(0)可能反而加重问题——它会强制创建新层叠上下文，且干扰 fixed 定位计算 - 更稳妥的做法是：把需要 fixed 的元素（如悬浮按钮）移出渐变容器 DOM，用
document.body.appendChild()或 Vue/React 的Teleport/createPortal挂到下 - 确保该 fixed 元素自身有明确
z-index（比如z-index: 1100），且其父级（即body）没意外触发层叠上下文（查body是否有opacity 或 <code>filter）
Bootstrap 4 的 $z-index-map 不支持渐变类自动对齐
Bootstrap 4 的 Sass 变量里定义了 $zindex-dropdown: 1000、$zindex-modal: 1050 等，但 .bg-gradient-* 类本身不参与 z-index 排序——它只是背景。真正出问题的是你把需要高层级的组件（如 .dropdown-menu）放在了渐变容器内部，而该容器又因上述任一原因成了低层级层叠上下文的“根”。
- 别试图给
.bg-gradient-primary加z-index—— 它没position，加了也无效 - 要提升的是“承载浮层的容器”，比如
.navbar或.hero-section，且必须满足两个条件：已定位（position: relative或static以外）、z-index 值大于目标浮层所需最小值（如z-index: 1001才能压过.dropdown-menu） - 如果渐变背景用于全屏 hero 区，建议结构上分离：用伪元素
::before绘制渐变背景，主体内容层单独定位并设 z-index，避免背景和内容共用一个 DOM 节点
实际调试时最易忽略的点：你以为在调 z-index，其实是在跟浏览器的层叠上下文生成逻辑较劲。渐变本身很干净，但围绕它的响应式适配代码，常常是那个偷偷加了 opacity: 0.999 的“真凶”。
