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

前端之家收集整理的这篇文章主要介绍了html – 用背景和z-index重叠的li元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_0@
我有一个ul在树状列表项在水平视图.
所有的列表项都有相同的背景图片

我想重叠的背景图像,所以它看起来像这样:

这是我的jsFiddle

CSS:

@H_403_9@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:

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

z-index出错了!

解决方法

您应该首先给出至少相对于您的列表项的位置:否则z-index不起作用.然后就用 @H_403_9@div#menu ul li + li { left : -20px; }

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

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

猜你在找的HTML相关文章