Z-Index not working? [closed]

Answer 1

Give the items an position: relative, that should work.

Edit: And don't use negative z-index. Just give the element which should lie on the top, the highest, the second one the second highest,...

So the code should looke like:

<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>