嘗試用固定的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子項，以便堆棧上下文從此處開始，而不是與標頭位於同一級別。