title: Can anyone explain why my Z-Index isn't working as expected?
body: <p>Hi I'm trying to create a "sticky" navigation bar, however the content further down the page appears over the top of the navigation bar after scrolling. I've tried applying z-indexes to the navigation but not sure why it isn't working. Any help would be much appreciated!</p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;!-- Start Header --&gt;
      &lt;header classs="parallax"&gt;
          &lt;section id="stickynav"&gt;
              &lt;div class="container-responsive"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-4"&gt;
                          &lt;h1&gt;Title&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-6"&gt;
                          Content
                      &lt;/div&gt;
                      &lt;div class="col-lg-2"&gt;
                          Content
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/header&gt;
      &lt;!-- End Header --&gt;
      &lt;!-- Start Main --&gt;
      &lt;section id="main"&gt;
          &lt;div class="container"&gt;
              &lt;h2&gt;About Us&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;!-- End Main --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header {
      width: 100%;
      height: 90%;
      background-image: url('../images/slider/accounting-banner.jpg');
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
      color: #fff;
  }
  section#stickynav {
      position: fixed;
      z-index: 9999;
      height: 12%;
      width: 100%;
      padding-top: 1%;
      padding-left: 2%;
      padding-bottom: 1%;
      padding-right: 2%;
  }
  .stickystyle {
      background-color: #FFF;
      -webkit-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
      box-shadow: 0px 1.5px 5px 0px rgba(0,0,0,0.75);
      color: #000;
  }
  section#main {
      margin-top: -2.5%;
      position: relative;
      z-index: -1;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&lt;script&gt;
      var sn = $("#stickynav");
      $(window).scroll(function() {
          if($(this).scrollTop() &gt; 100) {
              sn.addClass("stickystyle");
          } else {
              sn.removeClass("stickystyle");
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance</p>