猫头鹰旋转木马导航隐藏

Question

我使用猫头鹰旋转木马，我想要导航上方的幻灯片，以便轻松导航。现在它们隐藏或在滑块下面。我不知道如何把它们放在上面。我在CSS中为转盘和导航尝试了z-index，但没有任何反应。需要帮助谢谢！

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不把物品，如您希望它。我认为你需要改变这些按钮的位置，而不是设置不同的z-index。

这里有一个z-index如何工作的例子。更改z-index如你所愿，检查如何对这些箱子alignement工作：

https://jsfiddle.net/grmcfb7z/

你可以试试这个CSS的解决方案：

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

您可能要调整它，如果它不”你看起来像你想的那样。我从你的评论中尝试了它，它对我来说很好。

UPDATE

挖掘到确切的问题后，以下是完整的解决方案：

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

工作的jsfiddle：https://jsfiddle.net/43wo7g98/3/