Why z-index does not apply in this case - html

Question

I have two elements, one for header and the other for navbar.
I want to apply z-indexproperty to make the header on the top, then the navbar on the bottom.
HTML
<div id="main">
<div id="header"><h2 id="logo">Logo</h2></div>
<div id="navBar"><span>x</span></div>
</div>
CSS
div#header {
height:70px;
background-color:#fff;
border-bottom:1px solid rgba(0, 0, 0, 0);
box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
z-index:20;
}
div#navBar {
height:50px;
padding-right:240px;
line-height:45px;
background:yellow;
z-index:21;
}
div#header #logo {
position:relative;
right:-20px;
bottom:-20px;
}
Also you can see the demo on jsfiddle
Why this problem occur ?
And how to solve it ?

Answer 1

For z-index to work you need to set position on those elements: absolute, relative, etc.

Answer 2

You mean the header text appearing above the nav bar? Perhaps you could try moving the header div tag into the beginning of the nav bar div tag.

Answer 3

It will work if you just switch the z-indices. Lower index means bottom. You have the larger index on the bottom element. Change 21 to 19. Also You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.
div#header {
position: relative
height:70px;
background-color:#fff;
border-bottom:1px solid rgba(0, 0, 0, 0);
box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.1);
z-index:20;
}
div#navBar {
position: relative
height:50px;
padding-right:240px;
line-height:45px;
background:yellow;
z-index:19;
}
div#header #logo {
position:relative;
right:-20px;
bottom:-20px;
}