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声明都会建立一个本地堆叠上下文。因此，通过在z-index: 1上指定.btn-tag，您将为后代z-index的每个按钮建立一个本地上下文（工具提示在父级上下文中具有更高的z-index，第一个btn-tag，但是第二个btn-tag有另一个具有相同z-index值的上下文，因为它在DOM之后显示在顶部）。

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

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

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

1 个答案: