How to change the layer order of divs - css

Question

I have 2 divs with the following class names: "red" and "green"
The green div is hidden but when the mouse hovers over the red div, the green div appears.
However, the green div is appearing in front of the red one. I would like to reverse the order so that when hovering over the red div, the green one appears beneath it i.e. I want the red div to overlap the green div (I don't simply want a space between the 2 divs, I want the red div to be over the green one). I actually want to include a background PNG inside the red div so that when the green div appears it is actually underneath the PNG.
The green div is nested inside the red div and my CSS is as follows:
.green{
display: none;
}
.red:hover .green{
display: block;
}

Answer 1

you can change the order of layers with z-index
if you always want the red on to be on top and not put some text on it make it like this:
z-index:9999;
if you want to know more about it, use this tutorial: z-index

Answer 2

I don't see how you can hover over the red div since it's nested inside the green div and that one is hidden, therefor the red div should be hidden too.
But I changed some things.
I used position, z-index and nested the green inside the red div.
HTML
<div class="red">
<div class="green">
</div>
</div>
CSS
.green {
display: none;
background: green;
width: 310px;
height: 310px;
margin-left: -5px;
position: relative;
z-index: -1;
}
.red {
background: red;
width: 300px;
height: 300px;
margin: 5px;
}
.red:hover .green {
display: block;
}
I made the size of the green div a little bigger and added some margin so it would be visible.
Here's a live example http://jsfiddle.net/PaulvdDool/FpsuA/

Answer 3

HTML
<div class="wrapper">
<div class="red"></div>
<div class="green"></div>
</div>
CSS
.wrapper {
position: relative;
height: 50px;
width: 50px;
}
.red {
top:0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background-color:#d42046;
z-index:2;
}
.green {
top: 0;
left: 0;
position: absolute;
display: none;
height: 60px;
width: 60px;
background: #1cc477;
z-index:1;
}
.wrapper:hover .green {
display: block;
}
DEMO:
jsFiddle