Div在另一个div之上 - 边框重叠，如标签

Question

这是我的小提琴：

https://jsfiddle.net/xmcufcuq/

.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>

这就是我想要实现的目标：

它应该显示为＆＃34; tab＆＃34;。 z-index和position：relative不起作用。

Answer 1

以下是我尝试的内容：更新了height属性以删除底部边框：

.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;
}

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-title类中添加两个附加属性：

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

另外删除：

top: 4px

通过这项改变，您可以实现目标。

Here is the fiddle