CSS background-images and Z-Index problem

Question

Hope someone has an easy answer on this. I have a header image which is just a 75px high gradient with a fade on the bottom. I have it set as the background image on my header and I want to throw in a left-sidebar on my page. There is a transparency on the header image and when I have my sidebar I can't get it to sit behind the header. You can see in this screenshot:

link text

The green sidebar won't "sit" behind the header. I have the header z-index set to 99 and the sidebar to 1. I tried the reverse to make sure I didn't mix up my numbers but that didn't work. Both are absolutely positioned. I'm attaching their CSS selectors in the hopes someone has an easy answer. Am sure I'm missing something basic:

div.header {
 z-index: 99;
 background: transparent;
 background-image: url(images/header_bg.png);
 position: absolute;
 height: 85px;
 width: 100%;
 font-family: Helvetica, Verdana, Arial, sans-serif;
}

div#leftsidebar {
 height: 400px;
 border-right-style: dashed;
 border-right-width: 1px;
 z-index: -1;
 margin-top: 75px;
 width: 200px;
 position: absolute;
 background-color: #66ff66;
}

Thanks.

Answer 1

Try removing the "background:transparent;" attribute from your div.header selector.

Answer 2

Okay, the answer was, and none of you guys would have known this, that my sidebar was inside the header and obviously it couldn't sit behind its parent 's background. Makes sense. I wouldn't have done it on purpose but think that when I was writing the HTML I pushed the header tag way down and didn't realize that I was writing my sidebar inside of it. Stupid mistake.