html - 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 属性。

如何让后元素出现在表单列的顶部。

**编辑:看起来好像宽度受制于 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 或为.tab-nav设置overflow-x: visible