html - overlapping 1 div over another using z-index -

i trying overlap div2 on 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 float right.

there's number of ways them 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 div child of other one. in case z-index not anything, since child shown above parent.

<div id="div1"> <div id="div2"></div> </div> 

also, can go other routes , use position: absolute instead , top/right values, etc.