如何将 div 放在其他 div 后面答案

【问题标题】：How to place div behind other div如何将 div 放在其他 div 后面
【发布时间】：2017-06-08 01:46:42
【问题描述】：

我想创建一个包含 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% 高度和宽度的图像上方。

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：