overlapping 1 div over another using z-index - html

Question

I am trying to overlap the div2 over div1
http://jsfiddle.net/user1212/QsLVB/
<div id="div1"></div>
<div id="div2"></div>
#div1{
width: 200px;
height: 200px;
background-color: olive;
float: right;
position: relative;
z-index: 1;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
float: right;
position: relative;
z-index: 2;
}
I need both to float to the right.

Answer 1

There's a number of ways you could get them to overlap.
First example http://jsfiddle.net/QsLVB/3/
Use negative margins.
#div2{
margin: 20px -100px 0 0;
}
Second example http://jsfiddle.net/QsLVB/4/
Just make the div a child of the other one. In this case z-index will not do anything, since the child will always be shown above the parent.
<div id="div1">
<div id="div2"></div>
</div>
Also, you can go other routes and use position: absolute instead and like top/right values, etc.

Answer 2

#div1{
width: 200px;
height: 200px;
background-color: olive;
position: absolute;
z-index: 1;
right: 0;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
position: absolute;
z-index: 2;
right: 0;
}
Actually you don't need negative margins or anything like that - you can just modify your existing css to solve the problem. I ran it using my code and it works great. This is the solution I would choose in your case.
Firstly to layer anything you need to use position: absolute or position: fixed (which work similarly for our needs here).
Secondly, once using position absolute (or fixed) you can choose to position one or more edges of each div using top: right: bottom: and left:. You don't need any of them, but providing at least one will guarantee that that edge will appear at that pixel position within it's containing div.
Assuming you place these two divs within the body tag or at least don't need them to be further right than their outer containing div, you can set "right: 0;" for each div and they will work similarly to float: right for relative positioned divs (As in your original code), but since they are absolute positioned they can occupy the same space.
Then use z-index to control which one appears on top of the other.
cheers :-D

Answer 3

You could also set the left or right property of div2
DEMO using left
#div2 {
...
left: 200px;
}
Or instead of using float:right, use position:absolute in conjunction with right
DEMO
#div1, #div2 {
/* float: right; // removed */
position: absolute; /* changed from relative */
right: 0; /* added */
}

Answer 4

This is easy to accomplish if you put div2 inside div1, giving div2 an absolute position and right: 0 while its parent, div1, has a relative position.
See it in action here: http://jsfiddle.net/heGJt/
Here's the simplified CSS:
#div1 {
position: relative;
width: 200px;
height: 200px;
background-color: olive;
float: right;
}
#div2 {
width:100px;
height: 100px;
background-color: orange;
position: absolute;
right: 0;
}
And the HTML:
<div id="div1">
<div id="div2"></div>
</div>