悬停时的Z-index

Question

由于选择了行高，我制作的列表与每个元素略有重叠。我想拥有它，以便当我将鼠标悬停在每个项目上时，悬停动画覆盖其他所有内容。我把z-index放在悬停上，但悬停仍然低于某些部分。

.sidebar ul {
margin: 0;
list-style-type: none;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height:20px;

}

a:hover {
color: #424242;
text-decoration: none;
background-color:#424242;
z-index: 100; !important
}

Answer 1

这很棘手，因为当你将物品绑在一起时，你将失去悬停它们的能力。无论如何，请尝试下面这个css。 Check this fiddle

使用带有position或fixed值的属性absolute会堆叠这些项目，我相信这不是您的意图。这就是为什么relative是你最好的朋友

ul {
    margin: 0;
    list-style-type: none;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    line-height: 11px;
}

    ul a {
        z-index: -10;
        position: relative;
    }

li:hover a {
    color: #424242;
    text-decoration: none;
    background-color: #424242;
    z-index: 100 !important;
}

Answer 2

<强> w3schools zIndex property description

  

zIndex属性设置或返回已定位元素的堆栈顺序。

     

提示：定位元素是position属性设置为：relative，absolute或fixed。

的元素

您需要为a：hover

将位置设置为“relative”，“absolute”或“fixed”