更改多维html列表分层的方向

Question

我正在尝试实现类似于下面的jsfiddle的效果。我想以相反的方向将HTML列表分层，因为它是默认的。

目标是让父列表元素看起来好像它们位于子列表元素之上。在小提琴中，子元素上有边缘顶部以更好地显示框阴影。我的目标是将margin-top从5px更改为-5px，并将该子项目显示在父项下方。

http://jsfiddle.net/cepDd/

这是可以实现的吗？我用z索引尝试过一些东西无济于事。我试图使用绝对定位，但这似乎也不是很好。

Answer 1

Z-indexing仅在您设置position属性时有效。在这种情况下，将其设置为relative。

See this Fiddle根据您的代码。

注意：我已将边距设置为0px而不是5px，因此孩子在父母下面收起。我建议您使用padding-top代替margin-top来获得更多间距

Answer 2

不确定我是否完全理解目标。孩子已经在父母的“下方”了。如果你的意思是“落后”，你可以设置孩子的不透明度

 opacity: 0.5;

演示

的

A FIDDLE