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

最佳答案

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>

关于jquery - OwlCarousel滑块中的重叠元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47331940/

10-12 12:51
查看更多