divを他のdivの後ろに置く方法

Question

5枚の画像で構成されたスライドショーを作成したいと思います。このように、2つのボタンと4つの背面に4つの大きなボタンを配置したいと思います（最初は1、 2番目の数字は2、3番目の数字は3番目など...）：http://imgur.com/P9EpTcq （点線は実線の後ろにあります）。私が言っていることを理解してくれることを願っています

この単純なHTMLマークアップCosidering：

<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 2 .big-ssimgが親各1/4等しくなるようにしたいことは、.previous-BTTNが拳であることを1/.big-ssimg divの4つと.next-bttnの1つを親の最後の1/4にする必要があります。

これを考慮すると、どうすれば入手できますか？私はjsやその他のものを扱うことができます。また、z-indexの使い方も知っていますが、CSSのプロパティを「位置づけ」や「表示」するのではなく、どうやって配置すればいいのか分かります。

img＃3の後ろにあるimg＃2とimg＃4、img＃2とimg＃4の後ろにあるimg＃1とimg＃5

次のボタンと前のボタンは、親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>