我有这个代码:
#gallery {
color: #3d4148;
margin: 24px 0 48px 0;
}
.gallery-slideshow {
padding-bottom: 48px;
}
.gallery-buttons {
width: 60px;
height: 40px;
background-color: #f1bf06;
-webkit-transform: skew(18deg);
-moz-transform: skew(18deg);
-o-transform: skew(18deg);
}
.gallery-buttons p {
color: #f9f8f8;
font-family: 'permiansanstypefacebold', Arial, sans-serif;
text-transform: uppercase;
font-size: 14px;
padding-top: 8px;
cursor: pointer;
}
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 id="gallery" class="text-center">Gallery</h1>
<div class="cycle-slideshow gallery-slideshow" data-cycle-center-horz=true data-cycle-prev="#prev" data-cycle-next="#next">
<img src="http://lorempixel.com/g/900/500/city" alt="" class="img-responsive">
<img src="http://lorempixel.com/900/500/abstract" alt="" class="img-responsive">
<img src="http://lorempixel.com/900/500/city" alt="" class="img-responsive">
<img src="http://lorempixel.com/g/900/500/people" alt="" class="img-responsive">
</div> <!-- end cycle slideshow -->
<!-- SLIDESHOW CONTROLS -->
<div class="gallery-buttons" id="prev"><p class="text-center">Prev</p></div>
<div class="gallery-buttons" id="next"><p class="text-center">Next</p></div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end gallery -->
我想要的是让这两个带有画廊按钮类的 div 向上移动并重叠在幻灯片中的图像之上。如您所见,我正在使用 bootstrap 和 cycle2.js。我尝试了各种可能的位置属性组合,但我无法让它工作。也许你可以帮助我。
最佳答案
似乎如果你添加 position:relative;
和 z-index:999;
到你的 .gallery-buttons
它似乎他们在上面。
.gallery-buttons {
width: 60px;
height: 40px;
transform: skew(18deg); /*I would also add the standard transform*/
-webkit-transform: skew(18deg);
-moz-transform: skew(18deg);
-o-transform: skew(18deg);
background-color: #f1bf06;
/*add these*/
position:relative;
z-index:999;
}
这只会让他们处于领先地位。除此之外,我不知道您希望它们如何定位。
查看此 fiddle
更新
要如何定位,您可以相应地设置 left
、right
和 top
属性。
#prev{
left: -25px;
}
#next{
position: absolute;
top: 400px;
right: -15px;
}
查看此更新 fiddle
关于html - 幻灯片放映的 CSS 定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35322949/