Comment forcer un élément au-dessus d'un autre

Question

J'ai deux éléments qui se chevauchent légèrement (le fil d'Ariane), côte à côte, et je veux faire celui de gauche pour couper celui de droite. La définition de z-index n'a pas semblé fonctionner. Y a-t-il un meilleur moyen?

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-relative. Que définir z-index: 9999.

La propriété position spécifie le type de méthode de positionnement utilisé pour un élément.

.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

Si l'on suppose que tous ces menus sont à l'intérieur d'un conteneur div, définir le style de parent float: left; et faites flotter les enfants: c'est vrai. Veuillez vous assurer que la commande doit être annulée. Regarde.

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