如何强制元素高于另一个元素

Question

我有两个略微重叠（面包屑）的元素，并排，我想让左边的那个元素剪掉右边的那个。设置z-index似乎不起作用。还有更好的方法吗？

样本：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

将position设为relative。比设置z-index: 9999。

  

position属性指定用于元素的定位方法的类型。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

假设所有这些菜单都在容器div中，请将父样式设置为float：left;让孩子们漂浮：对。请确保必须撤销订单。看一看。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;