Arranging divs on the z-axis - css

Question

I want a div to go under another div. In this example I want the #under to go under #box. I've played a bit around with z-index, but I can't get it to work, I suppose it has to do with the way my markup is arranged.
My question is - is it possible to make #under go under #box without changing the markup?
You can check out my example here: http://jsfiddle.net/timkl/hrsHY/
This is my HTML:
<div id="main-content">
<div id="box">
<h2>box</h2>
</div><!-- /box -->
</div><!-- /main-content -->
<div id="under">
<h2>under</h2>
</div><!-- /under-->
<div id="footer">
<h2>footer</h2>
</div><!-- /footer -->
This is my CSS:
#container {
font-family: Helvetica;
color: #ccc;
font-weight: bold;
}
#main-content, #box, #footer, #under {
padding: 16px;
}
#box {
background: #F3F3F1;
height: 200px;
}
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
}
#footer {
background: #F3F3F1;
}

Answer 1

Z-index only works with absolute positioning.
#container {
font-family: Helvetica;
color: #ccc;
font-weight: bold;
position: absolute;
}
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
position: absolute;
}
When you desire them to be positioned relative (as in postion: relative;) You can position them absolute within a surrounding div which you position relative to acquire relative positioning of the two div's combined.

Answer 2

Your z-indexed elements need to have a position for the z-index to apply. Try adding position: relative to each div with a z-index.
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
position: relative;
}