올빼미 회전 목마가 Wordpress 테마의 Z- 색인을 따르지 않습니다.

Question

내 Wordpress 테마의 헤더에 Owl Carousel을 구현했습니다. 그것은 배경 이미지와 오버레이 div가 포함 된 각 항목이있는 기본 슬라이더로, 결국 블로그 게시물에 대한 정보가 표시됩니다. 나는 또한 내 블로그의 상단에 고정 된 탐색 모음이 있습니다. 요소의 스타일을 어떻게 지정하든 올빼미 회전식 캐 러셀은 Z- 인덱스 매개 변수를 따르지 않고 내 고정 탐색 위에 스크롤합니다.

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

: 여기

.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입니다 :

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

그리고 내 회전 목마의 스타일 : 여기

는 내 탐색의 스타일이다

마지막으로, 여기에 내 주제의 꼬리말에 넣은 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- 색인이 회전식의 z- 색인 (100)보다 높아야합니다.

.topbar { 
    z-index:999; 
}