Z-index 2 divs

[bluewalrus]

How can I position 2 divs, 1 on top of the other but have the text from the 2nd div on top of the first one. In the example below I want the text from nav above the header, and leftside divs. I want the leftside div though under the header div. So nav should have the highest z-index which i gave it, then header, and then leftside, for some reason it is not working though. Thanks for any ideas you can offer here.

Example:


<div id="leftside">
<div id="nav">
<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>
</div>
</div>
<div id="header">
<h1><span>Title</span></h1>
<h2><span>Subtitle</span></h2>
</div>


#leftside {
background:url(side22.png) repeat;
margin-left:15px;
position:absolute;
z-index:0;
width:207px;
height:666px;
}
#header {
width:100%;
height:160px;
background:url(/../bg2.jpg) repeat #ffffff;
top:15px;
position:absolute;
z-index:1;
}
#nav {
position:absolute;
z-index:3;
width:75px;
text-decoration:none;
font-family: "Rockwell", "Courier New", Courier, monospace;
font-weight:bolder;
font-size:17pt;
color:#000000;
}
#leftside #nav a {
margin-left:40px;
line-height:50px;
color:#000000;
text-decoration:none;
}
#leftside #nav a:hover {
color:#666666;
text-decoration:underline;
}
#header h1 {
height:77px;
width:375px;
background:url(/../h1.png) no-repeat;
margin-top:15px;
margin-left:400px;
}
#header h2 {
height:79px;
width:428px;
background:url(/../h2.png) no-repeat;
margin-top:0px;
margin-left:450px;
}
#header h1 span {
height:0px;
width:0px;
visibility:hidden;
}
#header h2 span {
visibility:hidden;
height:0px;
width:0px;
}