尝试用固定的z索引绝对覆盖z索引
尝试用固定的z索引绝对覆盖z索引
提问于 2018-12-06 01:29:34
我在谷歌上搜索了很多，并在这里就我所面临的这个问题寻求一些专家的建议。
标题有一个下面的css -
.head {
position: fixed;
z-index: 1;
}页面DIV上的内容有一个表单，在它的一些字段中有一个工具提示，工具提示上有下面的css -
<div class="sample">
<input type="text">
<div class="tooltip" style="top: -44px; left: 1228px;
display: block;">
<div class="downarrow"></div>
<div class="inside">Sample tooltip text goes here!!!</div>
</div>
</div>以及css -
.tooltip{
position: absolute;
z-index: 1070;
}现在，根据我的知识，堆叠是固定的，绝对的，然后是相对的(如果错了，请纠正我)。这就是为什么我的工具提示在标题div下面。但是，有没有办法让工具提示出现在最上面呢？
感谢您的回复。我在不改变布局的情况下找到解决方案时遇到了很大的困难，因此我也写了这篇文章。
更新: CodePen：https://codepen.io/anon/pen/VVJpzw
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-06 22:51:20
从.main css类中删除z-index: 0，而不是删除相对位置。如果您只是删除相对位置或z索引，您将忽略这个主要部分中的堆叠上下文(reference)，但是使用position: relative的用例仍然多于z-index (包含在其中的绝对定位元素)的用例。你不想在你的主要部分创建一个堆叠上下文，如果标题有一个类似于大型菜单/下拉导航的东西，否则这些菜单将显示在主要部分的下面。
如果在main部分中需要任何类型的结构，请创建.main的子项，以便堆叠上下文从那里开始，而不是在与标题相同的级别上。
Stack Overflow用户
发布于 2018-12-06 13:30:10
只需删除.main类的position: relative属性，因为它不是相对的父类。
.main {
padding-top: 100px;
flex: 1 0 auto;
display: block;
[position: relative;] -------> remove this line.
display: flex;
flex-direction: column;
width: 100%;
height: 50vh;
box-sizing: border-box;
z-index:0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53637729
复制相关文章
相似问题