z-index issue in chrome only - html

Question

I keep getting the same issue when attacking the problem in the method offered on various sites.
Q.How can i set the nav to a z-index of 1000 to appear above all other elements in the site?
I have tried position: absolute & relative' within the fixed div.
I need the nav to be fixed, and expand as bootstrap does but i need the whole nav at any time to appear above anything else.
The nav
<div id='nav_container' class='fixed_nav'>
<div id='nav_div' class=''>
<nav id='navbarnav' class="navbar navbar-default admin_nav_bar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class='brand_image' src='assets/images/logo-1-small.png' alt='' /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pills">
<li class="active home-pill"><a href="#home" id='home_button'>Home</a></li>
<li class='vids-pill'>Vids</li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right pills">
<!--
<li class='login_button'>
<a href='#signin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Sign in</a>
</li>
<li class='register_button'>
<a href='#register' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Register</a>
</li>
-->
<li class="dropdown">
New <b class="caret"></b>
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Video</li>
<li>Picture</li>
<li>Music</li>
<li class="divider"></li>
</ul>
</li>
<li class='user_button admin-pill'>
<a href='#admin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Admin</a>
</li>
<li class='user_button myaccount-pill'>
<a href='#myaccount' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'><? echo $_SESSION['userName']; ?></a>
</li>
<li class='logout_button'>
<a href='http://www.xxxxxxx.co/home/bin/logout/logout.php' type="button" id='logout_button' class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Logout</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
The Body of which i wish to appear below but in chrome is appearing above the nav
<div class='container'>
<h3>
New Video
</h3>
<hr />
<div id='new_vid_form' class='' style='position: relative; z-index: 0;'>
<div class="input-group marg_5">
<span class="input-group-addon">Article Title</span>
<input id='new_vid_form_title' type="text" class="form-control" placeholder="Article Title">
<span class="input-group-addon">
<span id="new_vid_form_title_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<div class="input-group marg_5">
<span class="input-group-addon">Short Desc.</span>
<input id="new_vid_form_shortDesc_status" type="text" class="form-control" placeholder="Short Description">
<span class="input-group-addon">
<span id="new_vid_form_shortDesc_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<div class="input-group marg_5">
<span class="input-group-addon">Youtube ID</span>
<input id="new_vid_form_youtubeID_status" type="text" class="form-control" placeholder="Youtube Video ID | watch?v=' this bit ' ">
<span class="input-group-addon">
<span id="new_vid_form_youtubeID_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<textarea id="new_vid_form_longDesc" class="input-large text_area_fw" placeholder='Long Description'></textarea>
</input>
<hr />
<div class="input-group marg_5">
<span class="input-group-addon">Tags</span>
<input id="new_vid_form_tags" type="text" class="form-control" placeholder="Tags (No more than 10) seperated by comma">
<span class="input-group-addon">
<span id="new_vid_form_tags_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<button class='btn btn-default'>Add video</button>
</div>
</div>
The associated CSS
.fixed_nav {
width: 100%;
position: fixed;
top:0;
}
#nav_div {
z-index: 10000;
}

Answer 1

I use the bootstrap Navbar with headroom.js to make it move up & down. I have to set the z-index in the css for the style i used .navbar-fixed-bottom, works for top as well this way , this achives fixed & the z-index, no need to create separate styles, yours are probabaly being overridden you can check in chrome dev tools, in your bootstrap css file look for and .navbar-fixed-top, .navbar-fixed-bottom, then add z-index: 1030; I can't imagine why I used 1030, just needs to be a big enuff to be more than the total amount of elements of the page whatever yours is.
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
HTML
<div class="navbar-fixed-bottom">
<ul>
<li>
...
</li>
</ul>
</div>

Answer 2

Possibly way off track, but in your HTML markup your navbar has the id nav_div, but your CSS selector is targeting #navdiv (no underscore)