要素を別の要素の上に強制する方法

Question

2つのやや重なり合った（ブレッドクラム）要素が横に並んでいますが、左側に1つ右側にクリップするようにしたいと思います。 z-indexの設定が機能していないようです。より良い方法がありますか？

DEMO：relativeから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。セットz-index: 9999より。

positionプロパティは、要素に使用される位置決め方法のタイプを指定します。すべてのこれらのメニューは、コンテナのdivの内側に、floatに親のスタイルを設定していると仮定すると

.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`に`;相対：

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