Z-索引不起作用？ [关闭]

Question

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

http://cssdesk.com/6L2sN

我正在尝试做的是，黑色 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>