Positioning elements using z-index is causing unexpected result - html

Question

I am trying to implement a popup menu in html using z-index. The page is composed of a top bar an a tab bar below it.
I want to apply box-shadow to both of them, so I can't use position:static.
The tabs-bar should have a z-index larger than the nav-bar's so it hides the box-shadow of the nav-bar (so when I hide the tabs-bar I would like to see the box-shadow of the nav bar)
The drop down menu should be place on top of both, but for some strange reason, it is placed on top of the nav-bar, but behind the tab-bar, although its z-index is set to a value higher than both.
I read about z-index contexts, but I can't seem to understand what is going on here.
here is a link to codepen:
http://codepen.io/anon/pen/WvgMXX
HTML:
<div class="body">
<div class="container">
<div class="navbar">
Nav bar
<div class="menu"> drop down menu</div>
</div>
<div class="tabs"> tabs bar </div>
</div>
</div>
css:
.body {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
background-color: gold;
position: static;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
margin: 0;
background-color: green;
}
.navbar {
width: 100%;
margin-bottom: 0;
z-index: 100;
box-shadow: 0px 3px 11px -5px #000;
height: 30px;
background-color: red;
position: relative;
}
.tabs {
width: 100%;
font-size: 1.1em;
box-shadow: 0px 3px 11px -5px #000;
z-index: 101;
position: absolute;
height: 30px;
background-color: gold;
top: 30px;
}
.menu {
width: 6em;
height: 6em;
position: absolute;
left: 200px;
background-color: white;
z-index: 2000;
}
Any ideas?

Answer 1

Your dropdown menu is contained in .navbar. A z-index value of child wouldn't affect if the parent's z-index is smaller to item in comparison. You need to increase .navbar z-index.
See the updated pen here http://codepen.io/anon/pen/VLGXvP
On a side note, there's huge z-index abuse, you can step with multiples of 3s or 9s. using 100 and 2000 is incredible waste. Same goes with unnecessary positioning.

Answer 2

Since your dropdown menu is placed inside the nav bar, you can set it's z-index as high as you want, but it will never be higher than the one of it's parent. You could put it outside the nav bar: http://codepen.io/anon/pen/Wvgzrg

Answer 3

I am not 100% sure what you want to achieve, but if you remove the "position: relative" property from your navbar, it works fine. I tried it in Chrome.
.navbar {
width: 100%;
margin-bottom: 0;
z-index: 100;
box-shadow: 0px 3px 11px -5px #000;
height: 30px;
background-color: red;
}
http://jsfiddle.net/11wkyvat/