css3 drop shadow under another div, z-index not working
HtmlCssZ IndexDropshadowHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
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 - Html
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.
Solution 3 - Html
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;
}