css伪元素由具有float属性的后续容器隐藏

Question

我有两列

1. 标签导航
2. 标签表格

标签导航栏有几个链接，点击后会打开第二列中的表单

我为标签导航栏中的每个链接设置了工具提示，如下所示（.scss）

ul{
  .tooltip{
    // display: inline;
    position: relative;
    transition: all 0.5s ease-in;
    &:hover:after{
      background: #333;
      background: rgba(0,0,0,.8);
      border-radius: 5px;
      bottom: -5px;
      color: #fff;
      content: attr(title);
      // left: 140%;
      padding: 5px 15px;
      position: absolute;
      z-index: 1;
      width: auto;
    }
    &:hover:before{
      border: solid;
      border-color: #333 transparent;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 6px solid #727272;
      bottom: 5px;
      content: "";
      left: 125%;
      position: absolute;
      z-index: 99;
    }
  }
}

然而，工具提示看起来似乎被表单容器隐藏，尽管它们给出了更高的z-index。



表单列没有z-index并且设置了float:left属性。

如何将after元素置于表单列的顶部。

**编辑：好像宽度受tabnav父**的宽度限制



.tab-nav有以下css（使用bourbon neat）

  .tab-nav {
    @include span-columns(4);
    max-height: 70vh;
    overflow-y: auto;
}

谢谢，

Answer 1

.tooltip部分被隐藏，因为其父级有overflow-x: hidden。

为工具提示设置position: absolute或为overflow-x: visible设置.tab-nav