Html 使导航栏始终可见(最重要的是)

Html 使导航栏始终可见(最重要的是),html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,有没有办法让导航栏成为最重要的? 此外,我一直在修补main.css代码点火器,但没有结果。 我不知道它为什么使用标题,但我正在处理的页面中有一个标题。 以下是显示我的问题的图像: 守则的一部分 <div id="navbar"> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header">

有没有办法让导航栏成为最重要的? 此外,我一直在修补main.css代码点火器,但没有结果。 我不知道它为什么使用标题,但我正在处理的页面中有一个标题。 以下是显示我的问题的图像:

守则的一部分

<div id="navbar">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Active Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Dropdown 
                        <b class="caret"></b>
                    </a> 
                    <ul class="dropdown-menu" data-no-collapse="true">
                        <li class="kopie">
                            <a href="#">Dropdown</a>
                        </li>
                        <li>
                            <a href="#">Dropdown Link 1</a>
                        </li>
                        <li class="active">
                            <a href="#">Dropdown Link 2</a>
                        </li>
                        <li>
                            <a href="#">Dropdown Link 3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

切换导航

我看不出您当前的CSS是什么,下面的div或section的de代码是什么。。。但是你应该把它添加到你的CSS中。并尝试将z指数保持在100以下

#navbar {position:relative; z-index:50;}          /* Navbar is on top */
#idOfContentHere {position: relative; z-index:0}  /* Your content is not on top */

抱歉搞得一团糟,我在stackoverflow有点新发帖了。 这是指向导航栏的main.css的一部分:

.navbar-default {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.85);
background: -webkit-linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFF, rgba(255, 255, 255, 0.8)); /* Standard syntax */
border-radius: 0 0 5px 5px;
border: 0;
margin: 0;
padding: 0;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2);
overflow: hidden;
}
.navbar-default .first a {
  border-radius: 0 0 0 5px;
}
.navbar-default .navbar-brand {
  margin-right: 50px;
  margin-left: 20px;
  width: 200px;
  height: 78px;
  background-image: url("img/logo-uanl.png");
  background-repeat: no-repeat; 
  background-position: 0 50%;
}
.navbar-default .navbar-nav > li {
  margin-left: 1px;
}
.navbar-default .navbar-nav > li > a {
  padding: 20px 25px;
  font-size: 16px;
  line-height: 18px;
  color: #666;
}
.navbar-default .navbar-nav > li > a > i {
  display: inline-block;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active:focus > a,
.navbar-default .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active:focus > a:focus,
.navbar-default .navbar-nav > li.active:hover > a:focus,
.navbar-default .navbar-nav > li:hover > a:focus,
.navbar-default .navbar-nav > li:focus > a:focus {
background-color: #73AF01;
color: #fff;
}
标题如下所示:

#header
{
position: fixed;
top: 0;
left: 0;
width: 120%;
z-index: 100000;
}

解决了它。。。问题在于:overflow中的“隐藏”属性。对于类似这样的未来事件,我建议使用属性“visible”或干脆不使用“overflow”。

这应该在顶部,但由于未知原因,页面不会在预览中显示它:
  • |