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

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.

Also https://stackoverflow.com/a/54903621/9868445 might be useful to some. — aderchox, Jul 16 '21 at 07:40

score 199 · Accepted Answer · edited Apr 22 '19 at 14:44

199

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.

edited Apr 22 '19 at 14:44

TylerH

20,799
66
75
101

answered Jul 15 '10 at 19:10

gearsdigital

13,915
6
44
73

3

note: parents always catch the shadow of child elements, regardless of position and z-index (else could habe been useful in submenus...) — codepen.io/anon/pen/obJQEJ – Frank N Feb 11 '16 at 16:25

score 19 · Answer 2 · edited May 10 '15 at 14:32

19

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.

edited May 10 '15 at 14:32

Community

1
1

answered Apr 26 '12 at 22:09

wittmason

338
2
5

score 9 · Answer 3 · answered Dec 10 '13 at 22:51

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

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

3 Answers3

Linked

Related