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

时间:2012-10-01 09:33:49

标签: html css z-index

我在水平视图中有一个ul树列表项。 所有列表项都具有相同的背景图像:

Background image is the same for all li

我想重叠背景图片,看起来像这样:

This is what I try to accomplish

这是我的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出错!

1 个答案:

答案 0 :(得分:14)

您应首先向列表项目提供至少position: relative,否则z-index无效。然后只需使用

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

所以标签将保持靠近(此规则将从第二个<li>元素开始应用)

示例小提琴:http://jsfiddle.net/Faffz/3/