how to position two divs above each over
All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Depending on which element you want on top, you can apply z-indexes to your absolutely positioned divs. A higher z-index gives the element more importance, placing it on the top of the other elements:
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
z-index: 1;
}
#num2 {
z-index: 2;
}
<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>
Use z-index to position divs on top of one another:
[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]
So, you'll position the divs with absolute/relative positioning and then use z-index to layer them:
http://www.w3schools.com/cssref/pr_pos_z-index.asp