10

水平方向のビューにulツリーリストアイテムがあります。すべてのリストアイテムの背景画像は同じです。

背景画像はすべてのliで同じです

背景画像を重ねて、次のようにします。

これが私が成し遂げようとしていることです

これが私のjsFiddleです

CSS：

    div#menu ul li{
    height:30px;
    display: inline;
    list-style-type: none;
    width: 60px;
    background: url(http://i.stack.imgur.com/adwVj.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-right:  5px;
    padding-left:30px;
    z-index:2;        
}

div#menu ul li:first-child{
    padding-left:20px;
    z-index:3;            
}
div#menu ul li:last-child{
    padding-left:35px;    
    margin-left:-30px   
    z-index:1;       
}

HTML：

<div id="menu">
       <ul>
           <li>Account</li>
           <li>Registreren</li>
           <li>Winkelwagen</li>
       </ul>
</div>

z-indexでうまくいかない！

4

1 に答える 1

14

最初に少なくともposition: relativeリストアイテムに与える必要があります。そうz-indexしないと効果がありません。その後、使用するだけ

div#menu ul li + li {
   left : -20px;   
}

<li>したがって、ラベルは互いに接近したままになります（このルールは2番目の要素から適用されます）

フィドルの例：http：//jsfiddle.net/Faffz/3/

于 2012-10-01T09:41:29.710 に答える