Как сделать так, чтобы тень появлялась над блоком div?

Здесь - пример того, что я пытаюсь выполнить.

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

Что я делаю не так?

 #top {width: 100%; высота: 100 пикселей; box-shadow: 3px 3px 3px # 333; цвет фона: синий; } #middle {ширина: 100%; высота: 200 пикселей; z-индекс: 0; положение: относительное; цвет фона: оранжевый; } #innerMiddle {ширина: 200 пикселей; высота: 200 пикселей; маржа: 0 авто; цвет фона: зеленый; }