html - 改变多维html列表分层的方向

Question

我正在尝试实现类似于下面的 jsfiddle 的效果。我想在默认的相反方向上分层一个 HTML 列表。

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

http://jsfiddle.net/cepDd/

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

Answer 1

Z-indexing 仅在您设置position属性时才起作用。relative在这种情况下，将其设置为即可。

根据您的代码查看此 Fiddle 。

注意：我已将边距设置为 0 像素而不是 5 像素，因此子元素会缩在父元素下方。我建议您使用padding-top而不是margin-top获得更多间距

Answer 2

Not sure if I fully understand the goal. The child is already 'below' the parent. If you mean 'behind', you could set the opacity of the child

 opacity: 0.5;

A FIDDLE that demonstrates