如何让 box-shadow 出现在 div 上方？

Question

Here is an example of what I'm trying to accomplish.

The box-shadow from the upper div won't appear on top of the div below it. From what I understand, I need to set the z-index so it will appear on top and that only works on elements with position: relative; but it's still not appearing.

What am I doing wrong?

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

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

Answer 1

It's #top and its box-shadow that you want to appear on top, so give that position: relative instead of giving position: relative to #middle . There's no need for z-index: 0 .

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

Answer 2

Change your CSS to:

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

Answer 3

You must use position: relative in upper div not below div

 #top { width: 100%; height: 100px; box-shadow: 3px 3px 3px #333; background-color: blue; position: relative; } #middle { width: 100%; height: 200px; z-index: 0; /* position: relative; */ background-color: orange; } #innerMiddle { width: 200px; height: 200px; margin: 0 auto; background-color: green; }

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