How to force an element above another

Question

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>

`z-index` only works on positioned elements try adding `position: relative;` to the "Main menu" `div`. — Hidden Hobbes, Mar 29 '17 at 14:31
Possible duplicate of [Why does z-index not work?](http://stackoverflow.com/questions/9191803/why-does-z-index-not-work) — wf4, Mar 29 '17 at 14:37

score 1 · Accepted Answer · answered Mar 29 '17 at 14:34

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>

score 0 · Answer 2 · answered Mar 29 '17 at 14:41

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>

How to force an element above another

2 Answers2