css3 drop shadow under another div, z-index not working [duplicate]

Question

i'm trying to use a drop shadow to make it look like one div (the header) is "above" another. my problem is that the "middle" div is covering the drop shadow. i tried using z-index to put the header div about the middle div, but it's not working (the shadow is still being covered). when i put a break between the divs, i can see the shadow and therefore i know that part of the code is working properly. i have the following html code:

<div id='portal_header_light'> <img src="Home.png" height="32px" \> <img src="Wrench.png" height="32px" \> </div> <div id='middle'></div> 

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

any ideas? thanks.

Answer 1

The z-index property works only on positioned elements. Those include position: relative, position: absolute, position: fixed, and position: sticky elements.

Try to give your div #middle a position: relative.

Answer 2

Try an inset box shadow ON the element you want to appear under.

.element-that-is-to-be-under{     -webkit-box-shadow: inset 0 8px 4px -4px #ddd;     -moz-box-shadow: inset 0 8px 4px -4px #ddd;     box-shadow: inset 0 8px 4px -4px #ddd; } 

Doing this will alleviate the z-index shuffle and you'll be much happier in the long run.