html - 如何将子元素覆盖在父元素上

Question

我有一个 <li>包含无序列表的元素。当用户将鼠标悬停在父项上时显示无序列表 <li>元素。最近在 <li> 中添加了一个边框和 child <ul>元素和 <li>没有底部边框。我想隐藏 <li> 底部后面的子无序列表顶部边框这样它将切断该部分的无序列表的边界。

这是我创建的 fiddle - http://jsfiddle.net/EZRU9/3/

请注意，这与原始实现很接近。我试着改变 parent <li>拥有绝对位置，但这没有用，我把它改回来了。当我尝试这样做时，我可能做错了其他事情，但自从我将其改回原样后，我创建了 fiddle 来模仿我目前拥有的东西。

Answer 1

您不能使用 z-index 将父项放在子项的前面。在这种情况下，我的建议是:在 <li> 中添加一个额外的元素。 , 给它 position: absolute;和一个匹配你的背景颜色，然后将其定位以覆盖 <ul> 的一部分边框。