尝试用 z-index absolute 覆盖 z-index

Question

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

header下面有个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;
 }

现在，据我所知，堆叠是固定的，绝对的，然后是相对的（如果错误请纠正我）。这就是为什么我的工具提示位于 header div 下方。但是，有什么办法可以让工具提示置顶吗？

感谢您的回复。在不更改布局的情况下找到解决方案时，我几乎碰壁了，因此 post.

更新：CodePen：https://codepen.io/anon/pen/VVJpzw

Answer 1

只需删除 .main class 的 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 class 中删除 z-index: 0，而不是删除相对位置。如果你只是删除相对位置或 z-index，你将在这个主要部分中取消堆叠上下文 (reference)，但是 position: relative 的用例仍然多于 [=13] =]（包含在里面的绝对定位元素）。如果 Header 有类似大型 menu/drop 向下导航的东西，您不想在主要部分创建堆叠上下文，否则这些菜单将显示在主要部分下方。

如果您需要在主要部分中使用任何类型的结构，请创建 .main 的 child 项，以便堆叠上下文从那里开始，而不是与 header 在同一层级.

尝试用 z-index absolute 覆盖 z-index

Trying to overwrite z-index with fixed with z-index absolute

html

css

z-index