html - z-index issue in chrome only -

html - z-index issue in chrome only -

i maintain getting same issue when attacking problem in method offered on various sites.

q.how can set nav z-index of 1000 appear above other elements in site?

i have tried position: absolute & relative' within fixed div.

i need nav fixed, , expand bootstrap need whole nav @ time appear above 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 , toggle grouped improve 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 nav links, forms, , other content 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'><a href="#vids">vids</a></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"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">new <b class="caret"></b></a> <ul class="dropdown-menu"> <li class="divider"></li> <li><a href="#newvid">video</a></li> <li><a href="#newpics">picture</a></li> <li><a href="#newmusic">music</a></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 wish appear below in chrome appearing above 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=' 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 10) seperated 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; }

i utilize bootstrap navbar headroom.js create move & down. have set z-index in css style used .navbar-fixed-bottom, works top way , achives fixed & z-index, no need create separate styles, yours probabaly beingness overridden can check in chrome dev tools, in bootstrap css file , .navbar-fixed-top, .navbar-fixed-bottom, add together z-index: 1030; can't imagine why used 1030, needs big enuff more total amount of elements of 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>

html css twitter-bootstrap z-index