使用背景和z-index重叠li元素

Question

我有一个水平布局的 ul，其中有三个列表项，它们都拥有相同的背景图片：

我想要重叠这些背景图片，让它看起来像这样：

这是我的 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出了问题！

- This_is_me

---

在问题中添加一些代码总是一个好主意，而不仅仅是在fiddle中添加。 - Jørgen R

谢谢您的提示，我已经将CSS和HTML添加到我的问题中。 - This_is_me

有时我们无法打开Fiddle。最好将代码放在问题中并提供Fiddle链接。 - Murali Murugesan

只是出于兴趣，不使用两个图像的原因是什么？似乎比重叠更简单。 - SpaceBeers

一张图片的负载较小，所以我认为更好。此外，我认为这将是一个很好的练习。 - This_is_me

好的。只是好奇多一张图片不会对负载产生太大影响，而且您也不必担心任何跨浏览器问题。对于这个良好布局的问题，我给一个赞。 - SpaceBeers

Answer 1

你应该首先为列表项至少添加 position: relative，否则z-index将无效。然后只需使用：

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

所以标签将保持紧密在一起（该规则将从第二个<li>元素开始应用）

示例展示： http://jsfiddle.net/Faffz/3/

- Fabrizio Calderan

---

谢谢，这个可行！我需要等待3分钟才能接受这个答案。 - This_is_me