javascript - 如何将div放在其他div的后面

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 一个是父级的最后 1/4。

考虑到这一点，我该如何获得它？我可以处理 js 和其他东西，我也知道如何使用 z-index，但不太了解“位置”和“显示”css 属性，我只需要知道如何以这种方式放置它们:

• img#1 和 img#5 在 img#2 和 img#4 之后，img#2 和 img#4 在 img#3 之后
• 下一个和上一个按钮位于父级的第一个和最后一个 1/4，并位于表示父级 div 的 100% 高度和宽度的图像上方。

Answer 1

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

通常我在设置为 position:relative 的容器 div 内的所有层上使用绝对位置。这允许您使用容器来定位整个堆栈，层 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>