jquery - OwlCarousel slider 中的重叠元素

Question

我的 CSS 有问题。
所以我想设置两个带有图像的 Owl Carousel 。我的问题是顶部的图像应该在前景中并且它完全重叠在背景中的图像，但是它有透明元素所以你仍然可以在背景中看到图像。但是因为它与背景图像重叠，您无法使用 Owl Carousel 在背景图像上滑动。我已经用 z-index 尝试了几件事，但它们并没有真正奏效。
我提供了一个简单的代码片段，可以更好地说明我的问题。我想保留有关 z-index 的元素顺序，但您也应该能够使用下方的旋转木马 slider 。任何形式的帮助将不胜感激。
谢谢。

$(document).ready(function(){
	  $(".owl-carousel").owlCarousel({
			loop:true,
			items:1
	  });
	});

.container{
  position:relative;
  background:#eee;
  width:100%;
  height:500px;
}
.top{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index:1;
}
.top .img{
  height:200px;
  background:rgba(100,100,100,0.5);
  text-align:center;
}
.bottom{
	position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.bottom .img{
  height:50px;
  background:white;
  text-align:center;
}

<div class="container">
  <div class="top">
    <div class="owl-carousel">
      <div><div class="img">1</div></div>
      <div><div class="img">2</div></div>
      <div><div class="img">3</div></div>
    </div>
  </div>
  <div class="bottom">
    <div class="owl-carousel">
      <div><div class="img">A</div></div>
      <div><div class="img">B</div></div>
      <div><div class="img">C</div></div>
    </div>
  </div>
</div>

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

Answer 1

z-index 仅适用于 position 属性已明确设置为 absolute 、 fixed 或 relative 的元素。由于您已经设置好所有内容，您只需将 z-index:2 添加到 .bottom

$(document).ready(function(){
	  $(".owl-carousel").owlCarousel({
			loop:true,
			items:1
	  });
	});

.container{
  position:relative;
  background:#eee;
  width:100%;
  height:500px;
}
.top{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index:1;
}
.top .img{
  height:200px;
  background:rgba(100,100,100,0.5);
  text-align:center;
}
.bottom{
	position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index:2;
}
.bottom .img{
  height:50px;
  background:white;
  text-align:center;
}

<div class="container">
  <div class="top">
    <div class="owl-carousel">
      <div><div class="img">1</div></div>
      <div><div class="img">2</div></div>
      <div><div class="img">3</div></div>
    </div>
  </div>
  <div class="bottom">
    <div class="owl-carousel">
      <div><div class="img">A</div></div>
      <div><div class="img">B</div></div>
      <div><div class="img">C</div></div>
    </div>
  </div>
</div>

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>