title: Trying to overwrite z-index with fixed with z-index absolute
body: <p>I have googled a lot and am here to seek some expert's suggestion on this issue am facing. </p>
  
  <p>The header has a css below -</p>
  
  <pre><code>.head {
    position: fixed;
    z-index: 1;
  }
  </code></pre>
  
  <p>and the content on the page DIV has a form with a tooltip in some of it's fields with below css on the tooltip -   </p>
  
  <pre><code>&lt;div class="sample"&gt;
       &lt;input type="text"&gt;
       &lt;div class="tooltip" style="top: -44px; left: 1228px; 
        display: block;"&gt;
         &lt;div class="downarrow"&gt;&lt;/div&gt;
         &lt;div class="inside"&gt;Sample tooltip text goes here!!!&lt;/div&gt; 
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css -</p>
  
  <pre><code> .tooltip{
     position: absolute;
     z-index: 1070;
   }
  </code></pre>
  
  <p>Now, from my knowledge the stacking goes like fixed, absolute and then relative(please correct me if wrong). which is why my tooltip goes under the header  div. But, is there any way to make the tooltip come on top?</p>
  
  <p>Appreciate your responses. I have pretty much hit a wall in finding a solution without making layout changes and hence the post.</p>
  
  <p>Update: CodePen: <a href="https://codepen.io/anon/pen/VVJpzw" rel="nofollow noreferrer">https://codepen.io/anon/pen/VVJpzw</a></p>