Question

我有这段代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我想要的是让这两个带有图库按钮类的div在幻灯片中向上移动并重叠在图像的顶部。如您所见，我正在使用bootstrap和cycle2.js。我尝试了各种可能与position属性的组合，但我无法让它工作。也许你可以帮助我。

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

幻灯片显示CSS定位问题

1 个答案: