html - 使用带有无序列表的 z-index 的 Css

Question

美好的一天
，我有这个例子：

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但没有得到任何结果。有什么帮助或建议吗？问候。

Answer 1

z-index 仅在元素定位为绝对或相对时才有效，例如：http://jsfiddle.net/xARSw/3/

我已设置position: relative;所有列表项并将 z-index 设置为 2，然后将第二个元素的 z-index 更改为 1。

Answer 2

#li1,
#li2,
#li3
{

    position:relative;
}

#li1
{
    z-index:100;
}

#li2 
{

    z-index:90;
}

#li3 
{

    z-index:80;
}

Answer 3

你肯定需要绝对或相对位置，然后倒计时

li {
  position:relative;
}
#li1 {
   z-index:3;
}
#li2 {
    margin-left:-15px;
    z-index:2;
}
#li3 {
    margin-left:-15px;
    z-index:1;
}