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

发布时间：2020-12-14 19:35:26 所属栏目：资源来源：网络整理

导读：我有一个ul在树状列表项在水平视图. 所有的列表项都有相同的背景图片：我想重叠的背景图像,所以它看起来像这样：这是我的jsFiddle CSS： div#menu ul li{ height:30px; display: inline; list-style-type: none; width: 60px; background: url(http://i.st

我有一个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出错了！

解决方法

您应该首先给出至少相对于您的列表项的位置：否则z-index不起作用.然后就用

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

所以标签将保持在一起(这个规则将从第二个< li>元素开始应用)

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!