html - CSS使用Z-index与无序列表

很好的一天
我有一个例子：
http://jsfiddle.net/xARSw/

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

和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;
}

我要做的是在li2后面显示li1，在li3后面显示li2。
我试图使用z-index但没有得到任何结果。有什么帮助或建议吗？当做。

最佳答案

#li1,
#li2,
#li3
{

    position:relative;
}

#li1
{
    z-index:100;
}

#li2
{

    z-index:90;
}

#li3
{

    z-index:80;
}

关于html - CSS使用Z-index与无序列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15829794/