CODEWITHSUNDEEP
htmlcssz-index
Skyler
Skyler

Reputation: 805

How to force an element above another

I have two slightly overlapping (breadcrumb) elements, side-by-side, and I want to make the one on the left to clip the one on the right. Setting z-index didn't appear to work. Is there a better way?

DEMO:https://plnkr.co/edit/5RCH9hswONT16QJeK3KE?p=preview

    .arrow-point {
        display: inline-block;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 15px solid #777;
        /* z-index:10; */
    }
    .arrow-body {
        font-family: verdana;
        font-size:15px;
        display: inline-block;
        background-color: #777;
        color:white;
        padding:2px 6px 2px 20px;
        height:20px;
        vertical-align:top;
        /* z-index:-3; */
    }
    .arrow-tail {
        position: absolute;
        display: inline-block;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 15px solid #FFF;
        /* z-index:-2; */
        /* margin-left:-6px; */
    }
    <div style="font-size:0;display:inline-block">
        <div class="arrow-tail"></div>
        <div class="arrow-body">Submenu A</div>
        <div class="arrow-point"></div>
    </div>
    <div style="font-size:0;float:left;margin-right:-6px;display:inline-block">
        <div class="arrow-body">Main Menu</div>
        <div class="arrow-point"></div>
    </div>

Upvotes: 1

Views: 2180

Answers (2)

Amir H. Bagheri
Amir H. Bagheri

Reputation: 1416

Assuming that all these menus are inside a container div, set the parent style to float:left; and have the children float:right. Please ensure that the order must be reversed. Take a look.

.container{
    position:relative;
    float:left;
}
.container > div{
    position: relative;
    margin-left: -15px;
    z-index: 10;
    font-size: 0;
    display: inline-block;
    float: right;
}
.container > div:last-child{
  margin-left:0;
}
.arrow-point {
        display: inline-block;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 15px solid #777;
        /* z-index:10; */
    }
    .arrow-body {
        font-family: verdana;
        font-size:15px;
        display: inline-block;
        background-color: #777;
        color:white;
        padding:2px 6px 2px 20px;
        height:20px;
        vertical-align:top;
        /* z-index:-3; */
    }
    .arrow-tail {
        position: absolute;
        display: inline-block;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 15px solid #FFF;
        /* z-index:-2; */
        /* margin-left:-6px; */
    }
<div class="container">
    <div>
        <div class="arrow-tail"></div>
        <div class="arrow-body">Submenu B</div>
        <div class="arrow-point"></div>
    </div>
    <div>
        <div class="arrow-tail"></div>
        <div class="arrow-body">Submenu A</div>
        <div class="arrow-point"></div>
    </div>
    <div>
        <div class="arrow-body">Main Menu</div>
        <div class="arrow-point"></div>
    </div>
</div>

Upvotes: 0

Red
Red

Reputation: 7324

Set position to relative. Than set z-index: 9999.

The position property specifies the type of positioning method used for an element.

.arrow-point {
        display: inline-block;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 15px solid #777;
        /* z-index:10; */
    }
    .arrow-body {
        font-family: verdana;
        font-size:15px;
        display: inline-block;
        background-color: #777;
        color:white;
        padding:2px 6px 2px 20px;
        height:20px;
        vertical-align:top;
        /* z-index:-3; */
    }
    .arrow-tail {
        position: absolute;
        display: inline-block;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 15px solid #FFF;
        /* z-index:-2; */
        /* margin-left:-6px; */
    }
<div style="font-size:0;display:inline-block">
        <div class="arrow-tail"></div>
        <div class="arrow-body">Submenu A</div>
        <div class="arrow-point"></div>
    </div>
    <div style="font-size:0;float:left;margin-right:-6px;display:inline-block;position: relative;z-index: 9999;">
        <div class="arrow-body">Main Menu</div>
        <div class="arrow-point"></div>
    </div>

Upvotes: 1

Related Questions