title: CSS Positioning Issue with :after Pseudo-Element
body: <p>EDIT: Tinkerbin example located in comments.</p>
  
  <p>The issue I'm running into is with the fixed topbar going behind the slider (only one slide is in there now for testing). This is happening because the light green background used to outline the header is created using an :after pseudo-element on the .page-header class, like so (using SASS):</p>
  
  <pre><code>.page-header {
      position: relative;
      z-index: 0;
      padding: 35px 0;
      &amp;:after {
          position: absolute;
          width: 100%;
          top: 0;
          left: 0;
          right: 0;
          height: 400px;
          border-bottom: 5px solid $white;
          z-index: -1;
      }
  }
  </code></pre>
  
  <p>This places the pseudo-element behind the header, but sill leaves it in front of the slider. I've positioned the slider relatively to place it in front of the pseudo-element, but I can't figure out for the life of me how to adjust so the topbar is always on top. Here the code for the topbar:</p>
  
  <pre><code>.nav-cont {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 0;
      height: 40px;
      z-index: 9999;
  }
  </code></pre>
  
  <p>Feel free to take a look at the demo site and let me know if you have any ideas. I've been going through <a href="http://css-tricks.com/9516-pseudo-element-roundup/" rel="nofollow"><strong>Chris Coyier's</strong></a> references along with some others and just can't seem to muster up a solution.</p>
  
  <p>Thanks in advance for anyone who might be able to take a look into this!</p>