owl carousel navigation hide - css

Question

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 CSS for the carousel and navigation but nothing happens. Need help thank you !
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 doesn't put items like you wish it would. I think you need to change positions of these buttons rather than setting different z-index.
Here you have an example of how z-index work. Change z-index as you wish and check how the alignement work on these boxes:
https://jsfiddle.net/grmcfb7z/
You can try this CSS for your solution:
.owl-buttons{
position: absolute;
top: -45px;
left: 50%;
transform: translateX(-50%);
}
You might want to tweak it if it doesn't look as you wish. I tried it on your example from the comments and it looks great to me.
UPDATE
After digging into the exact problem, here is the full solution:
#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
}
Working jsfiddle: https://jsfiddle.net/43wo7g98/3/