Eulenkarussell Navigation verstecken

Question

Ich benutze Eulenkarussell und ich möchte die Navigation über der Folie, um leicht zu navigieren. Jetzt sind sie versteckt oder unter dem Schieberegler. Ich weiß nicht, wie ich sie überstellen soll. Ich habe versucht, Z-Index in der CSS für das Karussell und Navigation, aber nichts passiert. Brauche Hilfe, danke!

JS

<script> 
$(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 
     }); 

    }); 
</script> 

CSS

#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; 
} 

Answer 1

z-index Artikel nicht setzen, wie Sie es wünschen würde. Ich denke, dass Sie Positionen dieser Knöpfe ändern müssen, anstatt unterschiedliche z-index einzustellen.

Hier haben Sie ein Beispiel dafür, wie z-index arbeiten. Ändern z-index, wie Sie wollen und überprüfen, wie die Ausrichtung der Arbeit an diesen Boxen:

https://jsfiddle.net/grmcfb7z/

Sie diese CSS für Ihre Lösung versuchen:

.owl-buttons{ 
    position: absolute; 
    top: -45px; 
    left: 50%; 
    transform: translateX(-50%); 
} 

Vielleicht möchten Sie es zwicken, wenn es doesn‘ schau wie du willst. Ich habe es an deinem Beispiel aus den Kommentaren versucht und es sieht gut aus.

UPDATE

Nachdem in das genaue Problem zu graben, hier ist die vollständige Lösung:

#owl-demo2 .item img { 
    display: block; 
    width: 100%; 
    height: auto; //we don't need position or z-index property here 
} 

.owl-theme .owl-controls .owl-buttons div { 
    color: #FFF; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; /*IE7 life-saver */ 
    margin: 10px; //fixed margin to not mess our buttons alignement 
    padding: 5px 15px; //smaller padding for better look 
    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, .owl-pagination { 
    position: absolute !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; //here we override our buttons 
              //positions 
} 

.owl-buttons { 
    top: 0 !important; //nav position 
} 

.owl-pagination { 
    bottom: 0 !important; //pagination position 
} 

Arbeiten jsfiddle: https://jsfiddle.net/43wo7g98/3/