html - Css using z-index with unordered list -

good day
have example:

http://jsfiddle.net/xarsw/

<ul>     <li id="li1">li 1</li>     <li id="li2">li 2</li>     <li id="li3">li 3</li> </ul> 

and css:

li {     border:solid 1px red;     float:left;     width:150px;     height:150px;     -webkit-border-top-left-radius: 50px;     -webkit-border-top-right-radius: 50px;     -moz-border-radius-topleft: 50px;     -moz-border-radius-topright: 50px;     border-top-left-radius: 50px;     border-top-right-radius: 50px;     text-align:center;     list-style: none; } #li1 {     background:#282828; } #li2 {     margin-left:-15px;     background:#888888; } #li3 {     margin-left:-15px;     background:#b8b8b8; } 

what i'm trying show li2 behind li1 , li3 behind li2.

i trying use z-index did not result. or advice? regards.

#li1, #li2, #li3 {      position:relative; }  #li1 {     z-index:100; }  #li2  {      z-index:90; }  #li3  {      z-index:80; }