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?

Answer 1

Add position: relative; to .navbar

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