CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eduard Stefan
Eduard Stefan

Reputation: 59

How to place div behind other div

I want to create a slideshow that consists in 5 images and I want to have a big one in the middle with 2 buttons and 4 behind them, in this way(the first one is 1, the second one is 2, the third one (the biggest) is 3 and so on...): https://i.sstatic.net/Ns1ah.jpg (the dotted line is behind the solid line). I hope you understand what I'm saying.

Cosidering this simple HTML markup:

<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>

*I want the two divs inside .big-ssimg to be equal 1/4 of the parent each, the .previous-bttn to be the fist 1/4 of the .big-ssimg div, and the .next-bttn one to be the last 1/4 of the parent.

Considering this, how can I obtain it? I can handle js and other things, also I know how to use z-index, but not so much "position" and "display" css properties, I just need to know how to place them in that way:

Upvotes: 0

Views: 423

Answers (1)

Korgrue
Korgrue

Reputation: 3478

To stack them, you will set the position to either relative or absolute in order for z-index to work. Be sure to apply the positioning to all elements that you want to stack.

Typically I use Absolute position on all layers within a container div that is set to position:relative. This allows you to use the container to position the whole stack and the layer divs will be positioned relative to the container instead of the body.

.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>

Upvotes: 1

Related Questions