падающая тень css3 под другим отделением, z-индекс, не работающий, [копирует]

Этот вопрос уже имеет ответ здесь:

• Почему z-индекс не работает? 4 ответа

я пытаюсь использовать падающую тень для создания, это быть похожим на одно отделение (заголовок) "выше" другого. моя проблема состоит в том, что "среднее" отделение покрывает падающую тень. я пытался использовать z-индекс для помещения отделения заголовка о среднем отделении, но это не работает (тень все еще покрывается). когда я поместил повреждение между отделениями, я вижу тень, и поэтому я знаю, что часть кода работает правильно. у меня есть следующий HTML-код:

и эта CSS:

#portal_header_light {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; text-align:center;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    padding: 0px 3px 0px 3px;
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);

    z-index:5;
}

#middle{
    height:308px;
    background-color:white;
    z-index:-1;
}

какие-либо идеи?спасибо.