【发布时间】：2016-09-22 22:19:39
【问题描述】：
我有两列
- 标签导航
- 标签表单
标签导航栏有几个链接，点击后会在第二栏打开一个表单
我正在为标签导航栏中的每个链接设置一个工具提示，如下所示 (.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（使用波旁威士忌）
.tab-nav {
@include span-columns(4);
max-height: 70vh;
overflow-y: auto;
}
谢谢，
【问题讨论】：
-
这不是有效的 CSS，您是否使用了某种预编译器？ （Sass、Less 等）如果是这样，值得在问题和标签中指出这一点。
-
哎呀..是的..我正在使用scss
-
您确定该元素位于表单列的后面吗？您是否尝试为之前/之后的伪元素设置背景颜色？
-
@DanielYoung - 我给了它一个背景......它似乎仍然被表单容器切割