Div 在另一个 div 之上 - 边框像制表符一样重叠

Question

这是我的 fiddle:

.ui-topbanner {
    color:#000;
    height: 31px;
    background-color: #f2e9da;
    border-bottom: 1px solid #d9cebc;
}
.ui-topbanner-title {
    position:relative;
    top:4px;
    left:15px;
    height:26px;
    line-height:26px;
    padding:0 10px;
    display:inline-block;
    color:#000;
    border:1px solid #d9cebc;
    background-color:#fff;
    z-index:98;
    font-size:.7rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.ui-topsubbanner {
    position:relative;
    color:#000;
    height: 33px;
    background: -webkit-linear-gradient(top, #f7f1e8 0%, #f4ecdf 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #efe8da;
    z-index:1;
}


<div class="ui-topbanner"><div class="ui-topbanner-title">Music Tracks</div>    </div>
<div class="ui-topsubbanner">test</div>

这就是我想要完成的：

它应该显示为 "tab"。 z-index 和 position:relative 不起作用。

Answer 1

向您的 .ui-topbanner-title 添加两个额外的属性 class:

bottom: -5px;
border-bottom: none;

另外删除：

top: 4px

通过此更改，您可以实现目标。

Here is the fiddle

Answer 2

见fiddle

将 ui-topbanner-title 的 css 更改如下

.ui-topbanner-title {
    position: relative;
    top: 5px;
    left: 15px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    display: inline-block;
    color: #000;
    border: 1px solid #d9cebc;
    border-bottom: none;
    background-color: #fff;
    z-index: 98;
    font-size: .7rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

如果您想使用绝对定位，请参阅 fiddle

ui-topbanner-title 的 CSS 就像

.ui-topbanner-title {
    position: absolute;
    top: 13px;
    left: 15px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    display: inline-block;
    color: #000;
    border: 1px solid #d9cebc;
    border-bottom: none;
    background-color: #fff;
    z-index: 98;
    font-size: .7rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

Answer 3

以下是我的尝试：更新高度属性以移除底部边框：

.ui - topbanner{
    color:#000;
    height: 31px;
    background - color: #f2e9da;
    border - bottom: 1px solid #d9cebc;
}

.ui - topbanner - title{
    position:relative;
    top:4px;
    left:15px;
    height:28px;
    line - height:26px;
    padding:0 10px;
    display:inline - block;
    color:#000;
    background - color:#fff;
    font - size:.7rem;
    border - top - left - radius: 5px;
    border - top - right - radius: 5px;
    border:1px solid #d9cebc;

}

.ui - topsubbanner{
    position:relative;
    color:#000;
    height: 33px;
    background: -webkit - linear - gradient(top, #f7f1e8 0 % , #f4ecdf 100 % );
    border - top: 1px solid #fff;
}

Div 在另一个 div 之上 - 边框像制表符一样重叠

Div on top of another div - border overlap like a tab

html

tabs

overlap

见fiddle