title: owl carousel navigation hide
body: <p>I use owl carousel and I want the navigation above the slide in order to navigate easily. Now they are hidden or below the slider. I don't know how to put them above. I tried z-index in the <code>CSS</code> for the carousel and navigation but nothing happens. Need help thank you !</p>
  
  <p>JS</p>
  
  <pre><code>&lt;script&gt;
   $(document).ready(function() {
      $("#owl-demo2").owlCarousel({
          navigation : true, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          items : 1,
          itemsDesktop : false,
          itemsDesktopSmall : false,
          itemsTablet: false,
          itemsMobile : false
          });
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    #owl-demo2 .item img{
      display: block;
      width: 100%;
      height: auto;
      position: relative;
      z-index: 1;
      }
      .owl-theme .owl-controls .owl-buttons div{
      color: #FFF;
      display: inline-block;
      zoom: 1;
      position: fixed;
      z-index: 2000;
      *display: inline;/*IE7 life-saver */
      margin: 90px;
      padding: 20px 0px;
      font-size: 12px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      background: #869791;
      filter: Alpha(Opacity=50);/*IE7 fix*/
      opacity: 0.5;
  }
  .owl-buttons {
      position: absolute !important;
      top: -45px !important;
      left: 50% !important;
      transform: translateX(-50%)!important;
  }
  </code></pre>