Z-Index not working? [closed] - html

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Please have a look at my code, I've spent several hours finding a solution to no avail. I'm not a professional Web Developer, I'm just doing this for our project at school.
http://cssdesk.com/6L2sN
What I'm trying to do is, the Black div is at the most top, and then the red below it, then green below it, same goes to the blue one. But it's doing the opposite. I don't understand why, is z-index not working as it should?

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>