猫头鹰轮播不遵循 Wordpress 主题中的 z-index

Question

我在我的 Wordpress 主题的标题中实现了 Owl Carousel。它是一个基本滑块，每个项目都包含一个背景图像和一个覆盖 div，最终将包含有关我的博客文章的信息。我的博客顶部还有一个固定的导航栏。无论我如何设置元素的样式，Owl Carousel 都会继续违反 z-index 参数并在我的固定导航顶部滚动。

这是我的导航样式：

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

我已经尝试了所有我能想到的方法，但没有任何效果。我最后一次尝试是将所有 div 包装在一个设置为低 z-index 的容器中，但这也不起作用。 Here is a screenshot. 任何帮助将不胜感激。谢谢！

Answer 1

您需要顶部栏导航的 z-index 高于轮播的 z-index (100)。

.topbar {  
  z-index:999;
}