フクロウカルーセルナビゲーションhide

Question

フクロウカルーセルを使用しており、簡単にナビゲートするためにスライドの上にナビゲーションが必要です。今はスライダーの下に隠れている。私はそれらを上に置く方法を知らない。カルーセルとナビゲーションのためにCSSのz-indexを試しましたが、何も起こりません。ありがとうございました！あなたはそれがほしいよう

JS

#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

<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は、アイテムを入れていません。私はあなたが異なるz-indexを設定するのではなく、これらのボタンの位置を変更する必要があると思います。

ここには、z-indexの動作例があります。あなたが望むようz-indexを変更し、これらのボックスにどのようにalignementの作業を確認してください。

https://jsfiddle.net/grmcfb7z/

あなたはあなたの解決のために、このCSSを試すことができます。

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

それはをdoesnの場合は、それを微調整したい場合がありますあなたが望むように見ないでください。私はコメントからあなたの例でそれを試してみて、それは私に素晴らしいです。

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/