Невозможно получить бокс-тень, чтобы появиться над Div

Вот пример того, что я пытаюсь выполнить. http://jsfiddle.net/QqME6/

Тень окна из верхнего div не будет отображаться поверх div ниже. Насколько я понимаю, мне нужно установить z-index, чтобы он отображался сверху и что работает только с элементами с position: relative;, но он все еще не отображается. Что я делаю неправильно?

<div id="top">
</div>

<div id="middle">
    <div id="innerMiddle">
    </div>
</div>

#top {
    width: 100%;
    height: 100px;
    box-shadow: 3px 3px 3px #333;
    background-color: blue;
}

#middle {
    width: 100%;
    height: 200px;
    z-index: 0;
    position: relative;
    background-color: orange;
}

#innerMiddle {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: green;
}

Ответ 1

It #top и его box-shadow, который вы хотите отобразить сверху, так что вместо position: relative to #middle укажите position: relative. Нет необходимости в z-index: 0.

http://jsfiddle.net/thirtydot/QqME6/1/

Ответ 2

Измените свой CSS на:

#top {
    width: 100%;
    height: 100px;
    box-shadow: 3px 3px 3px #333;
    background-color: blue;
    position:relative;
    z-index:1;
}

#middle {
    width: 100%;
    height: 200px;
    z-index: 0;
    position: relative;
    background-color: orange;
}