如何修复Bootstrap card层级异常 sidebar显示在卡片后方

这类遮挡本质是CSS层叠顺序异常，绝大多数场景是z-index配置错误或者层叠上下文嵌套限制，按下面的步骤排查就能解决：

1. 先调整z-index基础配置 #

注意z-index只对设置了非static定位的元素生效，Bootstrap默认Card没有特殊z-index配置，层级就是默认的0，直接给侧边栏设置更高层级就行：

/* 替换成你项目里侧边栏的实际选择器 */
.sidebar {
  /* 保留你原本给侧边栏设的定位就行，别用默认static，侧边栏常用sticky/fixed */
  position: sticky;
  z-index: 10; /* 数值比Card的z-index大就可以，别设太高，不然后面会挡模态框、下拉菜单这类组件 */
}

如果设完还是被挡，检查下Card是不是被手动加了高z-index的样式或者Bootstrap工具类，把Card的z-index调到比侧边栏小就可以：

.card {
  z-index: 1;
}

2. 排查层叠上下文嵌套问题 #

要是改完z-index还是没用，基本是父级元素创建了独立层叠上下文，子元素的z-index再高也没法突破父级的层级限制：

• 打开浏览器开发者工具，顺着侧边栏的DOM树往上查所有父元素，看有没有这些会创建层叠上下文的属性：
  • position设为relative/absolute同时z-index不是auto
  • position设为fixed/sticky
  • opacity值小于1
  • 加了transform/filter/perspective属性
  • will-change设成了transform/opacity这类值
• 要是侧边栏父级的层叠层级比Card父级低，两种解决方法：
  • 把侧边栏父元素的z-index调高，超过Card父元素的层级
  • 直接把侧边栏的DOM节点移到和Card同层级的位置，或者直接放到<body>下，脱离低层级父元素的限制

3. 排查Bootstrap内置类冲突 #

Bootstrap自带组件有默认的z-index规则，别冲突就行：

• 固定导航、侧边栏默认z-index是1030
• 下拉菜单默认z-index是1000
• 模态框默认z-index是1050
  要是之前给Card误加了position-relative搭配高z-index的工具类，直接删掉对应的类就好。

调试小技巧：在开发者工具的Computed面板搜z-index，能直接看到元素实际生效的z-index值，顺着DOM树往上查父元素样式，很快就能定位问题。

内容的提问来源于stack exchange，提问作者Jaisons YouTube