css3 drop shadow under another div z-index not working

0 votes

To make it appear as though one div (the header) is "above" another, I'm attempting to use a drop shadow. The "center" div is hiding the drop shadow, which is my concern. I attempted to position the header div close to the middle div using the z-index, but it didn't work (the shadow is still being covered). I can see the shadow when I place a break between the divs, so I know that particular section of the code is operating well. I have the HTML code below:

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

Aug 18 in CSS by Edureka
• 11,040 points
13 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

nbsp not working in CSS content tag

May be this could be the solution ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
69 views
0 votes
1 answer

CSS text-overflow: ellipsis; not working?

So, if you've arrived at this question ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
966 views
0 votes
0 answers
0 votes
1 answer

CSS shadow white line at the end of linear-gradient background

This is a byproduct of the gradient ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
493 views
0 votes
1 answer

How can I position my div at the bottom of its container?

Bottom and position properties can be used ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
128 views
0 votes
1 answer

How to show shadow over scroll view items in react native

Because of the limitations of react-native on ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
489 views
0 votes
1 answer

Why does z-index not work?

The z-index property only works on elements ...READ MORE

answered Feb 18 in Others by Rahul
• 9,240 points
53 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
5,050 views
0 votes
1 answer

Using/Handling colon inside a JSF generated HTML element ID in CSS selector

Yes, you can.  Just Backslash (\) the colon.  Like ...READ MORE

answered Nov 14, 2018 in Others by DataKing99
• 8,240 points
1,732 views
0 votes
1 answer

What is a css selector and where is it used?

CSS Selector is a combination of element ...READ MORE

answered Nov 21, 2018 in Data Analytics by Kalgi
• 52,350 points
296 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP