z-index ne s'applique pas sur une info-bulle imbriquée personnalisée

Question

Voici mon info-bulle:

.tooltip-content{ 
    visibility: hidden; 
    min-width: 180px; 
    background-color: rgba(38, 38, 38, 0.9); 
    color: #fff; 
    text-align: center; 
    border-radius: 4px; 
    padding: 5px 3px; 
    position: absolute; 
    font-size: 0.8em; 
    z-index: 5; 
    top: 120%; 
    left: 50%; 
    transform: translateX(-50%); 
    } 

    .tooltip-content::after { 
    content: ""; 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    z-index: 5; 
    border-style: solid; 
    border-color: transparent transparent rgba(38, 38, 38, 0.9) transparent; 
    } 

    .btn-tag:hover .tooltip-content { 
    visibility: visible; 
    z-index: 5; 
    } 

Et voici le bloc parent

.btn-tag { 
    position: relative; 
    border: 1px solid #333; 
    border-radius: 4px 4px 4px 4px; 
    color: #333; 
    font-weight: 500; 
    padding: 0.7em 0.4em; 
    font-size: 1em; 
    text-align: center; 
    width: 100px; 
    z-index: 1; 
    cursor: pointer; 
    background: red; 
    } 

Le problème est quand je passe la souris sur une Block A l'info-bulle est caché sous Block B même si sa valeur z-index est plus élevée.

DEMO

Que dois-je faire le mal et comment puis-je résoudre ce problème?

Answer 1

Chaque déclaration z-index établit un contexte d'empilement local. Donc, en spécifiant z-index: 1 sur le .btn-tag, vous établissez un contexte local pour chaque bouton pour l'index z descendant (l'info-bulle a un z-index plus élevé "dans" le contexte du parent, le premier btn-tag, mais alors le second btn-tag a un autre contexte avec la même valeur d'index z et puisqu'il est sur le DOM, il apparaît en haut).

Si vous supprimez la règle z-index sur la classe .btn-tag en la laissant par défaut, elle se comportera comme vous le souhaitez.

S'il vous plaît trouver la démo: https://jsfiddle.net/y6udf6f8/