我正在使用一个垂直标签布局的网页，每个标签对应一个图像和一些内容。我面临的问题是，活动标签没有像预期的那样出现在图像上方。
我试过调整活动和非活动链接的z索引值，但似乎不像预期的那样工作。活动标签的背景应该覆盖图像，但它仍然在它后面。
下面是相关的代码片段：

<div class="container d-flex justify-content-center mt-20">
    <div class="row">
        <div class="col-xl-3 col-lg-4 col-md-12 col-sm-12 col-12 mb-5">
            <div class="tab-vertical">
                <ul class="nav nav-tabs" id="myTab3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-vertical-tab" data-toggle="tab" href="#home-vertical" role="tab" aria-controls="home" aria-selected="true">---- HOSPITALITY MANAGEMENT </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-vertical-tab" data-toggle="tab" href="#profile-vertical" role="tab" aria-controls="profile" aria-selected="false">Tab Vertical #2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-vertical-tab" data-toggle="tab" href="#contact-vertical" role="tab" aria-controls="contact" aria-selected="false">Tab Vertical #3</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-xl-9 col-lg-8 col-md-12 col-sm-12 col-12 mb-5">
            <div class="tab-content" id="myTabContent3">
                <div class="tab-pane fade show active" id="home-vertical" role="tabpanel" aria-labelledby="home-vertical-tab">
                    <div class="image-container">
                        <img src="./assets/img/service1.png" alt="Image 1">
                        <div class="content-bottom-left">Content here</div>
                    </div>
                </div>
                <div class="tab-pane fade" id="profile-vertical" role="tabpanel" aria-labelledby="profile-vertical-tab">
                    <div class="image-container">
                        <img src="./assets/img/service1.png" alt="Image 2">
                        <div class="content-bottom-left">Content here</div>
                    </div>
                </div>
                <div class="tab-pane fade" id="contact-vertical" role="tabpanel" aria-labelledby="contact-vertical-tab">
                    <div class="image-container">
                        <img src="./assets/img/service1.png" alt="Image 3">
                        <div class="content-bottom-left">Content here</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>.tab-vertical .nav.nav-tabs {
  float: left;
  display: block;
  margin-right: 0px;
  border-bottom: 0;
}

.tab-vertical .nav.nav-tabs .nav-item {
  margin-bottom: 6px;
  width: 120px; /* Adjust the width as needed */
  position: relative;
  z-index: 1;
}

.tab-vertical .nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  padding: 17px 49px;
  color: #fff;
  width: 30vw; /* Set the width to 100% */
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
  position: relative;
  z-index: -1; /* Higher z-index for non-active links */
}

.tab-vertical .nav-tabs .nav-link.active {
  color: #fff;
  z-index: 5; /* Higher z-index for active link */
  background-color: transparent;
}

.tab-vertical .nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 0px !important;
}

.tab-vertical .tab-content {
  overflow: auto;
  -webkit-border-radius: 0px 4px 4px 4px;
  -moz-border-radius: 0px 4px 4px 4px;
  border-radius: 0px 4px 4px 4px;
  padding: 30px;
}

.image-container {
  position: relative;
  display: inline-block;
  z-index: 2; /* Lower z-index for the image */
}

.image-container img {
  max-width: 100%;
  height: auto;
  display: block;
}


.content-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
}
@media (min-width: 576px) {
  .image-container img {
      width: 70vw;
  }
}

@media (min-width: 768px) {
  .image-container img {
      width: 50vw;
  }
}

字符串
我已经尝试过调整CSS中的z-index值，包括活动链接和非活动链接，但它似乎并不像预期的那样工作。
有人能帮我理解为什么活动标签页没有显示在垂直标签页布局中的图像上方吗？我是否遗漏了什么或我应该考虑的其他方法？
在此先谢谢您！