How to position divs on top of one another - html

Question

I want to position divs on top of one another. I have created a fiddle. I have three divs. Each div contains an image. I want to position divs so that the div having the largest image is at the bottom and the one having smallest image is on top.
http://jsfiddle.net/bobbyfrancisjoseph/7spcZ/2/
http://jsfiddle.net/bobbyfrancisjoseph/7spcZ/2/show/

Answer 1

Just use this:
#page1 div {
position:absolute;
}
Demo: http://jsfiddle.net/ZwyTY/

Answer 2

Use position absolute with z-index.
use below css
#page-left {
float: left;
margin:5px;
}
#page-right {
float: left;
margin:5px;
}
#largest {
position: absolute;
z-index: 1;
}
#medium {
position: absolute;
z-index: 2;
}
#smallest {
position: absolute;
z-index: 3;
}
http://jsfiddle.net/sannankhalid/sc8qE/

Answer 3

Just use position : absolute;
#largest, #medium, #smallest{
position: absolute;
}
http://jsfiddle.net/w4WBk/
If you want to change the order of what comes on top, you can use z-index

Answer 4

You can use z-index & position: absolute to treat the elements as layers. But as per your requirement and element order, a simple position: absolute is enough
#page1 div {
position:absolute;
}

Answer 5

Couldn't you just change the order of the div's? Either that or target each one with position relative.

Answer 6

you can only define the absolute position into your main div that will automatically call the images as orderd or coded in your HTML here is no-need to use z-index in your css as per current your requirement.
CSS
#page1 div {
position:absolute;
}
But if you will change the order of #largest,#medium,#smallest div's in your HTML code than you will have to define the z-index property for cover up the images as:-
HTML
<div id ="page1">
<div id = "smallest">
<img src="http://ssl.gstatic.com/android/market/pongoproductions.Brad_Pitt_100100/hi-256-0-acd81f6f98299f7b230fc5014a9eb18c536adc8a"/>
</div>
<div id = "medium">
<img src="http://www.picgifs.com/celebrities/b/brad-pitt/celebrities-brad-pitt-179755.jpg"/>
</div>
<div id = "largest">
<img src="http://www.moviespad.com/photos/brad-pitt-poster-392f6.jpg"/>
</div>
</div>
CSS
#page1 div {
position: absolute;
}
#largest {
z-index: 1;
}
#medium {
z-index: 2;
}
#smallest {
z-index: 3;
}
http://jsfiddle.net/9cg3h/