Divs not using z-index - css

Question

The issue
I have a fixed navigation bar on my website (z-index: 98) and a rotating banner (z-index: 96).
When I scroll down, however, the content positioned relatively on the banner appears higher (in z-space) than the navigation bar.
Screenshots
Code
Banner:
div#banner {
padding-top:60px;
z-index: 98;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;
}
div#banner div#bannerWrap {
width:1080px;
margin: 0 auto;
height:100%;
position:relative;
}
div#bannerWrap div#logoLeft {
position:absolute;
top:50%; margin-top:-164px;
left:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:left;
}
div#bannerWrap div#logoRight {
position:absolute;
top:50%; margin-top:-164px;
right:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:right;
}
div#bannerWrap div#textRight {
position:absolute;
top:50%; margin-top:-20px;
right:0;
text-align:right;
color:white;
font-weight:bold;
font-size:28px;
text-shadow: 3px 3px 0 #1f3848;
float:right;
}
Navbar:
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
}
div#topBar div#tBContainer {
width:1080px;
margin: 0 auto; padding: 0;
}
div#topBar div#tBLogo {
width:56px;
height:60px;
background: url(../img/tB_logo.png) no-repeat;
display:block;
float:left;
margin-right:20px;
}
div#topBar div#tBLeft {
float:left;
padding-top:15px;
}
div#topBar div#tBRight {
float:right;
padding-top:15px;
text-align:right;
}

Answer 1

By default, z-Index doesn't work with position:static elements.
It only works with position:relative/absolute/fixed elements.
This might work:
div#banner
{
position:relative;
z-index:96;
}
Reference: z-index - CSS-Tricks

Answer 2

z-index repeated twice please check. and you don't have to specify any z-index to div#banner. please follow below css
div#banner {
padding-top:60px;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
}
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
z-index:2;
}

Answer 3

why you giving the z-index value twice? Also by watching the screenshot its clear banner is coming over the navigation because of higher z-index value. either give this one negative value or the give the positive higher value to navigation.
div#banner {
padding-top:60px;
z-index: 98;/* repeated*/
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;/* repeated */
}
Note: while using z-index its required to use positioning either relative or absolute