Html 尝试用固定的z索引绝对值覆盖z索引

我在谷歌上搜索了很多，我来这里是想就我面临的这个问题征求一些专家的建议

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

现在，据我所知，堆叠是固定的，绝对的，然后是相对的（如果错误，请纠正我）。这就是为什么我的工具提示会放在header div下面。但是，有没有办法让工具提示放在顶部呢

感谢您的回复。我在寻找解决方案的过程中遇到了很大的困难，没有对布局进行修改，因此也没有发表文章

---

更新：CodePen:

只需删除

位置：
.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;
}

从
.main
css类中删除
z-index:0
，而不是删除相对位置。如果您只是删除相对位置或z-index，那么您将忽略本节中的堆叠上下文（），但是使用
position:relative
比使用
z-index
（内部包含绝对定位元素）有更多的用例。如果标题有类似于巨型菜单/下拉导航的内容，则不希望在主节上创建堆叠上下文，否则这些菜单将显示在主节下方

如果您在主部分中需要任何类型的结构，请创建
.main
的子项，以便堆叠上下文从那里开始，而不是从标题的同一级别开始。
请在fiddle或codepen中提供您的页面html和所需的css子集，以便我们可以看到堆叠上下文，这不可能仅仅通过包含工具提示的。css的子集应该包括所有位置固定的类，以及所有位置绝对或相对的类，这些类的z索引值不是自动的。添加了一个代码笔来说明div结构和csf，因为某种原因，当我在我的页面中尝试它时，它不起作用。从.main类中删除z索引是有效的。可能还有其他因素阻碍了这项工作。但我会记住以后要小心的。谢谢你，@Paurnima partole事实上这很有效。删除位置：relative不起作用，但z索引删除效果很好！谢谢你提供了Ben Sewards的参考链接。
.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;
}