如何將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＃2和img＃4之后的img＃1和img＃5，img＃3后面的img＃2和img＃4
• 下一個和上一個按鈕是父級的第一個和最后一個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>