엘리먼트를 다른 엘리먼트 위로 강제하는 방법

Question

두 개의 약간 겹쳐진 (breadcrumb) 엘리먼트가 나란히 있고 오른쪽에있는 엘리먼트를 클립하기 위해 왼쪽에 하나 만들고 싶습니다. Z- 인덱스 설정이 작동하지 않는 것 같습니다. 더 좋은 방법이 있습니까?

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

이 relative에 position를 설정합니다. 설정보다 z-index: 9999.

position 속성은 요소에 사용되는 위치 지정 방법의 유형을 지정합니다.

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