Javascript 如何将div置于其他div之后 < P>我想创建一个幻灯片，它包含5个图像，我想在中间有一个大按钮，其中有2个按钮，后面有4个，在这里，第一个是1，第二个是2，第三个最大的是3，等等…… 虚线在实线后面。我希望你明白我的意思

以下是简单的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>

*我希望里面的两个div.big ssimg分别等于父级的1/4，前一个bttn是.big ssimg div的前1/4，下一个bttn是父级的最后1/4

考虑到这一点，我如何获得它？我可以处理js和其他事情，我也知道如何使用z-index，但没有那么多位置和显示css属性，我只需要知道如何以这种方式放置它们：

img2和img4后面的img1和img5，img3后面的img2和img4 “下一个”和“上一个”按钮是父级的第一个和最后1/4，位于表示父级div 100%高度和宽度的图像上方。

---

要堆叠它们，您需要将位置设置为相对或绝对，以便z索引工作。确保将定位应用于要堆叠的所有元素

通常，我在容器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>