OwlCarousel滑块

Question

我的css有问题。
所以我想用图像设置两个猫头鹰旋转木马。我的问题是顶部的图像应该在前景中，它与背景中的图像完全重叠，但它具有透明元素，因此您仍然可以在背景中看到图像。但由于它与背景图像重叠，因此无法使用猫头鹰旋转木马在背景图像上滑动。我已经尝试了z-index的几件事但是他们并没有真正解决问题 我提供了一个简单的代码片段，可以更好地说明我的问题。我想保持关于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仅适用于其position属性已显式设置为绝对，固定或相对的元素。由于您已经设置了所有内容，因此您只需将z-index：2添加到.bottom

即可

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;