title: z-index issue - getting a NESTED element over & above the modal overlay attached to body
body: <p>I have the following html, what i need is that the section tag having the text in it should come over &amp; above the overlay. Simply giving it higher z-index doesnt help.
  Please note that the below html is just a skeleton of what i have, there are more nested elements and content, however i just provided the basic minimum what was needed.
  Any help on this would be appreciated.</p>
  
  <p>plunk - <a href="http://plnkr.co/edit/sxC2D3nAgg7JJZjbOX0f?p=preview" rel="nofollow">http://plnkr.co/edit/sxC2D3nAgg7JJZjbOX0f?p=preview</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;body&gt;
       &lt;div class="wrapper"&gt;
        &lt;div class="content"&gt;
         &lt;header&gt;
          &lt;div class="searchwrapper"&gt;
           &lt;section&gt;
             This is the text to be over &amp; above overlay
           &lt;/section&gt;
          &lt;/div&gt;
         &lt;/header&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="overlay"&gt;&lt;/div&gt;    
    &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .wrapper {position:relative; }
  .overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1005; background: #000; opacity: .5;}
  .content {position:absolute; z-index:2;}
  header{position:absolute; z-index:15;}
  .searchwrapper {position:absolute;}
  section {z-index:1006; color:#fff;background:blue;}
  .modal {width:100px; height:100px; background:#fff; position:absolute; right:0; top:40px; z-index:1010;}
  </code></pre>