CODEWITHSUNDEEP
htmltabsoverlap
Hardist
Hardist

Reputation: 1993

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

Here is my fiddle:

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>

And this is what I want to accomplish:

enter image description here

It should be displaying like a "tab". z-index and position:relative doesn't work.

Upvotes: 1

Views: 570

Answers (3)

Pavithra Vijay
Pavithra Vijay

Reputation: 51

Here is what i tried: Updated the height property to remove the bottom border:

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

Upvotes: 2

Lal
Lal

Reputation: 14810

See the fiddle

Change the css for ui-topbanner-title as follows 

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

And if you want to do it with absolute positioning, see the fiddle

and the CSS for ui-topbanner-title would be like

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

Upvotes: 1

xzegga
xzegga

Reputation: 3149

Add two additional properties to your .ui-topbanner-title class:

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

Additionaly remove:

top: 4px

With this change you can archieve your goal.

Here is the fiddle

Upvotes: 0

Related Questions