April 2, 2012
How to position divs on top of one another
Question by Bobby Francis Joseph
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.
Answer by Muhammad Sannan
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;
}
Answer by Starx
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;
}
