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

这是父 block

.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 上时，工具提示被隐藏在 Block B 下，即使它的 z-index 值更高。

DEMO

我做错了什么，我该如何解决？

Answer 1

每个 z-index 声明都会建立一个本地堆栈上下文。因此，通过在 .btn-tag 上指定 z-index: 1，您将为后代 z-index 的每个按钮建立本地上下文(工具提示有更高的 z-index “在”父级的上下文中，第一个 btn-tag，但是第二个 btn-tag 有另一个具有相同 z-index 值的上下文，并且因为它在 DOM 之后出现在顶部)。

如果您要删除 .btn-tag 类上的 z-index 规则，使其默认保留，那么它将按照您的要求运行。

请找到演示:https://jsfiddle.net/y6udf6f8/