Question

我想创建一个包含5个图像的幻灯片，我希望在中间有一个大的，有2个按钮，4个在它们后面，这样（第一个是1，第二个是2，第三个（最大的）是3，依此类推......）：http://imgur.com/P9EpTcq （虚线在实线后面）。我希望你能理解我所说的话。

考虑到这个简单的HTML标记：

<div class="slideshow">
    <img href="#" class="ssimg" id="1"/>
    <img href="#" class="ssimg" id="2"/>
    <div class="big-ssimg">
        <img href="#" class="ssimg" id="3"/>
        <div class="previous-bttn"></div>
        <div class="next-bttn"></div>
    </div>
    <img href="#" class="ssimg" id="4"/>
    <img href="#" class="ssimg" id="5"/>
</div>

*我希望.big-ssimg中的两个div分别等于父级的1/4，.previous-bttn是.big-ssimg div的第1/4，以及.next- bttn one成为父母的最后1/4。

考虑到这一点，我该如何获得它？我可以处理js和其他东西，我也知道如何使用z-index，但不是那么多＆＃34; position＆＃34;和＆＃34;显示＆＃34; css属性，我只需要知道如何以这种方式放置它们：

img＃1和img＃5落后于img＃2和img＃4，img＃2和img＃4落后于img＃3
下一个和上一个按钮是父项的第一个和最后一个1/4，位于代表父div的100％高度和宽度的图像上。

Answer 1

要叠加它们，您需要将位置设置为相对或绝对，以使z-index起作用。确保将定位应用于要堆叠的所有元素。

通常我在容器div中的所有图层上使用绝对位置，该容器div设置为position：relative。这允许您使用容器来定位整个堆栈，并且图层div将相对于容器而不是主体定位。

.container{
    position:relative;
}

.layer1, .layer2 {
    position:absolute;
    top:0; //position the layers to the top left corner of the container
    left:0; //position the layers to the top left corner of the container

}

.layer1{
    z-index:100;
}

.layer2{
    z-index:200;
}




<div class="container">
   <div class="layer1"></div>
   <div class="layer2"></div>
</div>

如何将div放在其他div之后

1 个答案: