How to force an element above another - html

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>

Answer 1

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>

Answer 2

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>