WordpressのテーマのZ-インデックスに従っていないフクロウカルーセル

Question

私はWordpressのテーマのヘッダーにOwl Carouselを実装しました。これは基本的なスライダーで、各アイテムはバックグラウンドイメージとオーバーレイdivを含み、最終的には自分のブログ記事に関する情報を表示します。私はまた、私のブログのトップに固定ナビゲーションバーを持っています。要素のスタイルをどのようにしても、Owl Carouselは引き続きZ-インデックスパラメータに反し、固定ナビゲーションの上をスクロールします。ここで

は私のナビゲーションのスタイリングです：

.topbar { 
    width:100%; 
    color: #fff; 
    position:fixed; 
    font-family:'Abril Fatface'; 
    z-index:1; 
} 

そして、私のカルーセルのためのスタイリング：ここ

.carousel-wrap { 
    max-width: 1200px; 
    width: 100%; 
    height: 475px!important; 
    margin:auto; 
    margin-bottom:50px; 
    position: relative; 
    z-index:100; 
} 

/* fix blank or flashing items on carousel */ 
.owl-carousel .item { 
    position: relative; 
    -webkit-backface-visibility: hidden; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 37%; 
    height: 450px; 
} 

/* end fix */ 
.owl-nav > div { 
    margin-top: -26px; 
    position: absolute; 
    top: 50%; 
    color: #cdcbcd; 
} 

.owl-nav i { 
    font-size: 52px; 
} 

.owl-nav .owl-prev { 
    left: -30px; 
} 

.owl-nav .owl-next { 
    right: -30px; 
} 
.caroverlay { 
    padding:40px; 
    text-align: center; 
    background: rgba(255, 255, 255, 0.5); 
    max-width:300px; 
    display: block; 
    position: relative; 
    top:175px; 
    left: 40px; 
    color:#000; 
} 

はで私のテーマのヘッダーに配置HTMLです：

<div class="carousel-wrapper"> 
    <div class="owl-carousel"> 

    <div class="item" style="background-image: url('https://hdwallsource.com/img/2016/6/zoe-kravitz-celebrity-wide-wallpaper-55692-57437-hd-wallpapers.jpg')"> 
    <div class="caroverlay">This is some text.</div> 
    </div> 

    <div class="item" style="background-image: url('http://pixel.nymag.com/imgs/fashion/daily/2017/04/08/08-zoekravitz.w710.h473.2x.jpeg')"> 
    <div class="caroverlay">This is some text.</div> 
    </div> 

    </div> 
</div> 

最後に、テーマのフッターに置いたJSを以下に示します。

<script> 
$('.owl-carousel').owlCarousel({ 
    loop: true, 
    margin: 10, 
    nav: true, 
    autoplay: true, 
    items: 1, 
    singleItem: true, 
    itemsScaleUp : true, 
}) 
</script> 

私は、私は考えることができると何も作業していないすべてのものを試してみました。私の最後の試みは、低いz-インデックスで設定されたコンテナ内のすべてのdivをラップしていましたが、それも機能しませんでした。 Here is a screenshot.ご協力いただければ幸いです。ありがとう！

Answer 1

カルーセルのz-インデックス（100）を上回るように、トップバーのナビゲーションのZ-インデックスが必要です。

.topbar { 
    z-index:999; 
}