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

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.

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

假设所有这些菜单都在容器 div 中，将 parent 样式设置为 float:left；并有 children float:right。请确保顺序必须颠倒。看一看。

.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

html

css

z-index