title: On Scrolling Navbar Go Behind Slider And Silder Parallax Effect Is Not Working
body: <p>when i scrolling down my menubar go behind the cycle slider i tried <code>z-index</code> 1 but its not working please give any soloution i dont know what going wrong
     
      
      
      
          
          
      
      
      
      
      
          </p>
  
  <pre><code>    &lt;/div&gt;
  &lt;img src="http://malsup.github.io/images/p1.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/p2.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/p3.jpg"&gt;
      &lt;img src="http://malsup.github.io/images/p4.jpg"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="section_about"&gt;
  
  &lt;/div&gt;
  
  *{
      margin: 0;
      padding: 0;
  }
  
  /* Top Menu Start Here */
  
  .top_nav{
      height: 90px;
      width: 100%;
      background: rgba(0,0,0,.5);
      position: fixed;
      z-index: 1;
      transition:all 0.7s ease;
      -webkit-transition:all 0.7s ease;
      -moz-transition:all 0.7s ease;
      -o-transition:all 0.7s ease;
      -ms-transition:all 0.7s ease;
  }
  
  .container{
      height: 100vh;
      width: 100%;
      max-width: 100%;
      background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      top: 0;
  }
  
  .site-dt{
      background-color: #fff;
      height: 573px;
      width: 100%;
  }
  
  
  #slider-main{
      height: 578px;
      width: 100%;
      overflow: hidden;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  
  #slider-main #slider img{
      height: 100%;
      width: 100%;
  }
  
  .section_about{
      height: 573px;
      width: 100%;
      background-color: #de5670;
      overflow: hidden;
      position: absolute;
  }
  </code></pre>