幻灯片的 CSS 定位问题

Question

我有这个代码：

#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。我尝试了各种可能的位置属性组合，但我无法让它工作。也许你能帮帮我。

Answer 1

如果您将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