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

DEMO

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

Answer 1

每个 z-index 声明建立一个本地堆栈上下文。因此，通过在 .btn-tag 上指定 z-index: 1，您将为后代 z-index 的每个按钮建立本地上下文（工具提示具有更高的 z-index "inside" parent，第一个 btn-tag，但第二个 btn-tag 有另一个具有相同 z-index 值的上下文，因为它在 DOM 之后，它出现在顶部）。

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

请查找演示：https://jsfiddle.net/y6udf6f8/

z-index 不适用于自定义嵌套工具提示

z-index does not apply on a custom nested tooltip

html

css

z-index

tooltip