Попытка перезаписать z-index на фиксированный с z-index absolute

Question

Я много гуглил и здесь, чтобы узнать мнение эксперта по этому вопросу.

Заголовок имеет 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

Удалите z-index: 0 из вашего .main класса CSS, вместо удаления относительной позиции.Если вы просто удалите относительное положение или z-index, вы отклоните контекст стека ( reference ) в этом основном разделе, но все еще есть больше вариантов использования для position: relative, чем z-index (абсолютныйпозиционированные элементы, содержащиеся внутри).Вы не хотите создавать стековый контекст в главном разделе в тех случаях, когда в заголовке есть что-то вроде мега-меню / раскрывающейся навигации, в противном случае эти меню будут отображаться под основным разделом.

Если вам нужен какой-либо видструктуры в основном разделе, создайте дочерние элементы .main, чтобы контекст стека начинался там, а не на том же уровне, что и заголовок.

Answer 2

Просто удалите 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;
}