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 に設定してから、2 番目の要素の z-index を 1 に変更しました。

Answer 2

#li1,
#li2,
#li3
{

    position:relative;
}

#li1
{
    z-index:100;
}

#li2 
{

    z-index:90;
}

#li3 
{

    z-index:80;
}