Css3 Drop Shadow Under Another Div, Z-index Not Working

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

Solution 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.

Solution 2:

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

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

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

Solution 3:

Building on the other answers here, I found this worked better by putting position: relative on #portal_header_light, instead of #middle. Then I didn't have to have z-index: -1, which (at least in Chrome) messed up the cursor link hover effects and caused some other odd issues.

http://jsfiddle.net/thaddeusmt/m6bvZ/

Here is the simplified code:

<div id="portal_header_light">Header Content</div>
<div id="middle">Test Content</div>

#portal_header_light {
  position: relative;
  padding: 3px;
  background: #eee;
  -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  box-shadow:  0 4px 10px -2px rgba(0, 0, 0, 0.3);
  z-index:5;
}

#middle{
  height:308px;
  background-color:#fee;
  padding: 3px;
}