Question

我在Google上搜索了很多，并在这里寻求有关此问题的专家建议。

标头下面有一个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

Answer 1

只需删除position: relative类的.main属性，由于相对父级，它就不会消失。

.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;
}

Answer 2

从z-index: 0 CSS类中移除.main，而不是移除相对位置。如果仅删除相对位置或z-index，则将在本主要部分中取消堆叠上下文（reference），但是使用position: relative比使用z-index的用例仍然更多（其中包含绝对定位的元素）。如果页眉具有大型菜单/下拉导航之类的内容，则您不想在主要部分上创建堆叠上下文，否则这些菜单将显示在主要部分下方。

如果需要在主体部分中进行任何形式的结构，请创建.main的子项，以使堆叠上下文从此处开始，而不是在与标头相同的级别上。

尝试用固定的z-index绝对值覆盖z-index

2 个答案: