活动选项卡未在 HTML、CSS 的垂直选项卡布局中显示在图像上方

Question

我正在开发一个具有垂直选项卡布局的网页，其中每个选项卡对应于一个图像和一些内容。我面临的问题是活动选项卡没有按预期出现在图像上方。

我尝试调整活动和非活动链接的 z-index 值，但它似乎没有按预期工作。活动选项卡的背景应覆盖图像，但它仍位于图像后面。

以下是相关代码片段：

<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 值，但它似乎没有按预期工作。

有人可以帮我理解为什么活动选项卡没有显示在垂直选项卡布局中的图像上方吗？有什么我遗漏的或者我应该考虑的其他方法吗？

提前谢谢您！

Answer 1

看起来您正在使用 z-index 来控制选项卡和图像的堆叠顺序。但是，您的 CSS 中存在一些问题可能会导致该问题：

z-index on .nav-link:

您已设置

z-index: -1

；对于

.tab-vertical .nav-tabs .nav-link

。这会将非活动链接放置在其他元素后面。考虑删除此行以允许使用默认的堆叠顺序。

.tab-vertical .nav-tabs .nav-link {
  z-index: -1; /* Remove or adjust this line */
}

z-index

于

.image-container

： 您已将

z-index: 2;

设置为

.image-container

。这会将图像放置在选项卡上方。尝试删除或减少该值。

.image-container {
  /* ... */
  z-index: 2; /* Remove or reduce this value */
}

调整活动选项卡的

Z-index

： 确保活动选项卡的

z-index

高于其他元素。您已经在 CSS 中进行了设置，但请确保它高于图像容器的

z-index

。