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