Question

我尝试创建内容中有顶部边框的标签，然后活动标签重叠，使其与内容之间没有边框。

我尝试过使用负边距，但它不起作用。我想在不使用position：absolute

的情况下这样做

http://jsfiddle.net/Py8BW/3/（我使用绿色和红色，但最终结果颜色相同。）

<div class = "tab">inactive</div>
<div class = "tab tab_active">active</div>

<div class = "content"> 
</div>

.tab{
  width:70px  ;
     display:inline-block;
    background:green;
    height:50px;  
    // margin-bottom:-2px; /* makes both tabs look active */
}

.tab_active{
     margin-bottom:-2px; /* does nothing */
}

.content{
    border-top:2px solid black;
    width:200px ;
    background:red;
    height:200px;
}

Answer 1

另一种解决方案是在类border-bottom上添加.tab_active颜色。检查 DEMO 。

.tab_active{
    margin-bottom:-2px; /* does nothing */
    border-bottom:2px solid red;
    }

Answer 2

您可以使用z-index和定位来完成此操作。为活动标签提供较高的z-index，为内容标签提供略低的z-index，为不活动的标签提供更低的z-index。这意味着非活动选项卡将始终位于内容框的后面，而内容框又将位于活动选项卡的后面。

现在提供一个top: 2px和position: relative，将标签标题推到一下，与内容框重叠。现在，由于内容框位于非活动选项卡上方，因此内容框的边框将显示在选项卡标题上方，但不会显示在活动选项卡上，因为它位于内容框上方。

.tab {
    width:70px;
    display:inline-block;
    background:red;
    height:50px;
    z-index:0; /* Pushes inactive tabs behind the content box */
    position: relative;
    top:2px;
}
.tab_active {
    z-index: 2; /* Pushed it before content box because of higher z-index */
}
.content {
    border-top:2px solid black;
    width:200px;
    background:red;
    height:200px;
    position: relative;
    z-index:1; /* Normal z-index */
}

Demo

Updated Demo with borders - 只需要增加top值。

更新：或者，将活动标签的高度设置为等于普通标签的高度+边框的高度，如here。请注意，要使此方法有效，margin-top也应根据border-width进行更改。

在html / css中创建选项卡，以便在活动选项卡下方消失边框

2 个答案: