当以各种站点提供的方法攻击问题时,我总是遇到相同的问题。
问How can i set the nav to a z-index of 1000 to appear above all other elements in the site?
我已经尝试过position: absolute & relative' within the fixed div
。
我需要固定导航,并像引导程序一样扩展,但我需要随时随地显示整个导航。
导航
<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'><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>
我希望它的主体出现在导航栏的下方,但在铬合金中出现在导航栏的上方
<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>
关联的CSS
.fixed_nav {
width: 100%;
position: fixed;
top:0;
}
#nav_div {
z-index: 10000;
}
最佳答案
我使用带有headroom.js的引导Navbar使其上下移动。我必须在css中为我使用的样式设置z-index .navbar-fixed-bottom,以这种方式也适用于顶部,这实现了固定和z-index,无需创建单独的样式,您的可能性很大被覆盖时,您可以签入chrome开发工具,在您的引导css文件中查找.navbar-fixed-top,.navbar-fixed-bottom,然后添加z-index:1030;我无法想象为什么我使用1030,只是需要一个很大的余量,而不仅仅是页面的元素总数。
.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 - Z-index问题仅在Chrome中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24297134/