使当前活动的选项卡按钮保持在边框前面

Question

我正在为我的网站制作一个标签系统，如下图所示。

这是我的标记和LESS代码：

<div class="tabsWrapper">
  <div class="tabbar">
    <div class="tabbarButton current" id="tArticles">
      <img class="icon" src="/res/img/articles_archive.png" alt=""/>
      <span class="caption">Arhivă de articole</span>
    </div>
    <div class="tabbarButton" id="tFiles">
      <img class="icon" src="/res/img/files_archive.png" alt=""/>
      <span class="caption">Arhivă de fișiere</span>
    </div>
  </div>
  <div class="tabsContent">
    <div class="tab current" id="articles"></div>
    <div class="tab" id="files"></div>
  </div>
</div>

LESS（参阅完整代码here）

.tabbar {
  display: block;
  position: relative;
  overflow: hidden;

  > .tabbarButton {
    height: 45px;

    border-top: 1px solid #bfc2c2;
    border-right: 1px solid #bfc2c2;

    &:first-child { border-left: 1px solid #bfc2c2; }
    &:hover {
      box-shadow: inset 0 3px 0 #bfc2c2;
    }
    &.current {
      box-shadow: 0 1px 0 #f5f8f8, inset 0 3px 0 #a7aaaa;
      border-top: 1px solid #a7aaaa;
      background-color: #f5f8f8;
    }
  }
}
> .tabsContent {
  border-bottom: 1px solid #bfc2c2;
  border-left: 1px solid #bfc2c2;
  border-right: 1px solid #bfc2c2;
  border-top: 1px solid #bfc2c2;

  background-color: #f5f8f8;
}

如何让当前有效的标签按钮保持在其他人的前面？

Answer 1

我要尝试的第一件事是在选项卡中添加：after或：before，具有相同的宽度和相同的背景颜色但在forground上。 可以肯定的是，如果tabbar是相对定位的，你可以定位你的：绝对以后它总是好的！ 我不明白为什么你的盒子阴影解决方案不起作用..

.tabbarButton.current:after

您是否尝试过在forground上传递当前标签？ （z-index，translateZ ...）

Answer 2

我弄清楚自己如何达到我想要的效果：通过伪造标签条的底部边框：

将.tabsContent修改为没有border-top，然后为.tabbar类提供:after伪元素：

.tabbar {
  // truncated code
  &:after {
    position: absolute;
    display: block;
    content: '';

    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;

    border-bottom: 1px solid #bfc2c2;
  }
}

将z-index的{​​{1}}更改为.tabbarButton（例如），使其保持在2的前面非常重要。