One div above shadow from another div

Question

Let's say I have html code like this:

<div class="container">
   <div class="navbar">Navbar</div>
   <div class="body">Body</div>
</div>

and CSS:

.navbar {
    background-color: green;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
}

.body {
    background-color: white;
}

But I can't see shadow, because body is above navbar. How can I fix that?

I made a JSBin for people to mess around with. https://jsbin.com/batelizuse/edit?html,css,output — cwiggo, Oct 12 '15 at 08:01

score 4 · Answer 1 · answered Oct 12 '15 at 08:02

4

Add position: relative; to .navbar

https://jsfiddle.net/mpn8r6e9/1/

answered Oct 12 '15 at 08:02

FrontDev

837
5
19

Yes, that is the easiest way to do that. Thank you. – nima Sep 30 '20 at 09:10

score 3 · Accepted Answer · answered Oct 12 '15 at 08:02

3

http://jsfiddle.net/g3Lg7g1a/

You need to position your body and nav. Then add z-index as you please , in this case bigger z-index for nav.

.navbar {
    background-color: green;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    position: relative;
    z-index: 10;
}

.body {
    position: relative;
    z-index: 0;
    background-color: white;
}

answered Oct 12 '15 at 08:02

Paran0a

3,359
3
23
48

Thanks, it works ! Is it possible to create shadow only in the bottom? – Nominalista Oct 12 '15 at 09:50
But on the left and right there is a shadow too unfortunately. I'd like only in the bottom. – Nominalista Oct 12 '15 at 11:01
Google it. That is currently a different problem. ex http://stackoverflow.com/questions/4561097/css-box-shadow-bottom-only – Paran0a Oct 12 '15 at 11:02

score 1 · Answer 3 · edited Oct 12 '15 at 08:25

1

You add important in .navbar like this:

CSS

 .navbar
    {
    background-color: green !important;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    }

edited Oct 12 '15 at 08:25

Alex

8,461
6
37
49

answered Oct 12 '15 at 07:58

Waleed Ahmed

61
7

One div above shadow from another div

3 Answers3