OwlCarousel 滑块中的重叠元素

Question

我的 CSS 有问题。
所以我想设置两个带有图像的猫头鹰轮播。我的问题是顶部的图像应位于前景中，并且与背景中的图像完全重叠，但它具有透明元素，因此您仍然可以在背景中看到图像。但是因为它与背景图像重叠，所以您无法使用猫头鹰轮播在背景图像上滑动。我已经用z-index 尝试了几件事，但它们并没有真正奏效。
我提供了一个简单的代码 sn-p 可以更好地说明我的问题。我想保持有关 z-index 的元素顺序，但您也应该能够使用较低的轮播滑块。任何形式的帮助将不胜感激。
谢谢你。

$(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 仅适用于位置属性已显式设置为 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>