貓頭鷹旋轉木馬導航隱藏

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/