title: How does z-index and position fixed work together in css
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 3000px;
  }
  
  .fixed {
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    background: #f4f4f4;
  }
  
  .fixed h3 {
    position: relative;
    z-index: 300;
    color: #fff;
  }
  
  .overlay {
    background-color: #000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .5;
    position: fixed;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="fixed"&gt;
    &lt;center&gt;
      &lt;h3&gt;
        Only this thing should be brought on top of overlay..
      &lt;/h3&gt;
    &lt;/center&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Now how do I place get the h3 inside the .fixed div on top of overlay. Please post some reading on fixed along with z-index.</p>
  <p><a href="http://jsfiddle.net/CvMLw/4/" rel="nofollow noreferrer">http://jsfiddle.net/CvMLw/4/</a>
  Check the above jsfiddle, So how do i bring the h3 on top of overlay..</p>