のz-indexがここにカスタムネストされたツールチップ

Question

には適用されません。私のツールヒントです：

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

そして、ここでは、親ブロックが

ある

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

私はBlock Aオーバーツールチップを置くと、問題がありますそのZ-インデックス値が高いにもかかわらずBlock Bの下に隠されています。

DEMO

私が間違って何をやっているとどのように私はそれを修正することができますか？

Answer 1

各z-index宣言は、ローカルスタッキングコンテキストを確立します。したがって、.btn-tagにz-index: 1を指定すると、子孫のZ-インデックスの各ボタンのローカルコンテキストが確立されます（ツールチップは、親のコンテキスト、最初のbtnタグの「内側」よりも高いz-インデックスを持ちますが、 2番目のbtnタグは、同じz-index値を持つ別のコンテキストを持ちます。これはDOMの後ろにあるため、上に表示されます）。

.btn-tagクラスのz-indexルールを削除する場合は、デフォルトのままにしておけば、必要に応じて動作します。

デモをご覧ください：https://jsfiddle.net/y6udf6f8/