Question

请查看我的代码，我花了几个小时找到解决方案无济于事。我不是一个专业的网络开发人员，我只是为我们在学校的项目做这件事。

我要做的是，黑色div位于最顶部，然后是它下方的红色，然后是绿色位于其下方，同样是蓝色div。但它正在做相反的事情。我不明白为什么，z-index不能正常工作？

Answer 1

给项目position: relative，这应该有用。

编辑：不要使用负z-index。只要给出应该位于顶部的元素，最高的，第二个应该是第二高的......

所以代码应该像：

<style>
#head{
  position:relative;

    z-index:100;
    height:150;
    width:222;
    background-color:black;
    }

#item1{
    margin-top:-110;
    z-index:90;
    transition:0.5s;
    background-color:red;
    width:222;
    height:192;
  position: relative

}
#item1:hover{
    margin-top:0;
    transition:0.5s;
}
#item2{
    z-index:80;
    transition:0.5s;
    margin-top:-110;
    background-color:green;
    width:222;
    height:192;
  position: relative
}
#item2:hover{
    margin-top:0;
    transition:0.5s;
}
#item3{
    z-index:70;
    transition:0.5s;
    margin-top:-110;
    background-color:blue;
    width:222;
    height:192;
  position: relative
}
#item3:hover{
    margin-top:0;
    transition:0.5s;
}
</style>

Z-Index不工作？

1 个答案: