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

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类的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;
}

Answer 2

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

如果您需要在主要部分中使用任何类型的结构，请创建.main子项，以便堆栈上下文从此处开始，而不是与标头位于同一级别。