垂直标签页布局中Active Tab无法显示在图片上方的问题排查

1. 堆叠上下文隔离：垂直标签栏和图片容器分别处于Bootstrap的两个独立列（.col-xl-3 和 .col-xl-9）中，这两个列默认未设置position属性，导致子元素的z-index仅在各自的局部堆叠上下文中生效，无法跨列实现层级覆盖。
2. 错误的z-index配置：非激活标签设置了z-index: -1，会让标签元素跑到其父容器后方；而激活标签的高z-index因父列未创建更高优先级的堆叠上下文，无法突破图片所在列的层级限制。
3. 图片容器层级干扰：image-container设置了z-index: 2，在全局堆叠上下文中优先级高于未设置position的标签父列，导致图片始终压在激活标签上方。

步骤1：给标签所在列创建高优先级堆叠上下文 #

给包含垂直标签的列添加position: relative和足够高的z-index，确保其整体层级高于图片所在列：

/* 标签所在的列容器样式 */
.tab-vertical-parent-col {
  position: relative;
  z-index: 10;
  overflow: visible; /* 允许标签超出列宽度范围 */
}

同时在HTML中给对应列添加该类：

<div class="col-xl-3 col-lg-4 col-md-12 col-sm-12 col-12 mb-5 tab-vertical-parent-col">

步骤2：修正标签的z-index设置 #

移除非激活标签的负z-index，给激活标签设置比父列更高的z-index，确保它能覆盖图片：

.tab-vertical .nav-tabs .nav-link {
  position: relative;
  z-index: 1; /* 重置非激活标签层级，避免跑到父容器后方 */
  /* 保留其他原有样式 */
}

.tab-vertical .nav-tabs .nav-link.active {
  z-index: 11; /* 高于父列的z-index，确保跨列覆盖图片 */
  background-color: #你的激活背景色; /* 建议添加背景色，否则透明背景无法体现覆盖效果 */
  /* 保留其他原有样式 */
}

步骤3：降低图片容器的层级 #

调整图片容器的z-index，使其低于激活标签的层级：

.image-container {
  position: relative;
  display: inline-block;
  z-index: 1; /* 低于激活标签的z-index */
}

可选优化：调整标签宽度适配 #

原标签width: 30vw可能超出父列宽度，可替换为固定宽度避免布局错乱：

.tab-vertical .nav-tabs .nav-link {
  width: 280px; /* 替换30vw为固定宽度，适配垂直布局 */
}

内容的提问来源于stack exchange，提问作者Shibiliya Ismail