CODEWITHSUNDEEP
htmlcss
Nominalista
Nominalista

Reputation: 4840

One div above shadow from another div

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?

Upvotes: 4

Views: 1594

Answers (3)

Waleed Ahmed
Waleed Ahmed

Reputation: 81

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

Upvotes: 1

FrontDev
FrontDev

Reputation: 847

Add position: relative; to .navbar

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

Upvotes: 4

Paran0a
Paran0a

Reputation: 3457

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

Upvotes: 3

Related Questions