Заголовок, перекрывающий боковую панель, несмотря на использование background-images и Z-Index

Question

Надеюсь, у кого-то есть простой ответ на этот вопрос. У меня есть изображение заголовка, которое представляет собой градиент высотой 75px с выцветанием внизу. Я установил его в качестве фонового изображения в заголовке, и я хочу добавить левую боковую панель на своей странице. На изображении заголовка есть прозрачность, и когда у меня есть боковая панель, я не могу заставить ее сидеть позади заголовка. Вы можете видеть на этом скриншоте:

Зеленая боковая панель не будет "сидеть" за заголовком. У меня для z-index заголовка установлено значение 99, а для боковой панели - 1. Я попробовал обратное, чтобы убедиться, что я не перепутал числа, но это не сработало. Оба абсолютно позиционированы. Я прилагаю их CSS-селекторы в надежде, что у кого-то есть простой ответ. Я уверен, что упускаю что-то простое:

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;
}

Спасибо.

Answer 1

Хорошо, ответ был, и никто из вас, ребята, не знал бы этого, что моя боковая панель была внутри заголовка и, очевидно, она не могла находиться за фоном своего родителя. Имеет смысл. Я не сделал бы это нарочно, но подумал, что когда я писал HTML-код, я толкнул тег заголовка вниз и не понял, что пишу свою боковую панель внутри него. Глупая ошибка.

Answer 2

Попробуйте удалить «фон: прозрачный;» атрибут из вашего селектора div.header.