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

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

1 个答案: