导航栏以覆盖背景颜色和图像

Question

Question 1: I want to have my navbar affix overlay on top of the background color & background image of div ( top-banner ), for now when I scroll down. 问题1：我希望将我的导航栏粘贴覆盖在div（ 顶部横幅 ）的背景颜色和背景图像之上，现在当我向下滚动时。 the background color will overlay my navbar affix instead. 背景颜色将覆盖我的导航栏词缀。

How do I achieve such that my navbar will on top of my background color for the div class top-banner. 我如何实现这样我的导航栏将在div类顶部横幅的背景颜色之上。

There 1 more issue which is my navbar that sort of having margin left on itself, when I added data-spy affix, the navbar move slightly to the right, causing white space on the left and when I rescale my screen to smaller device size, the navbar collapse menu is unclickable unless I click slightly to the extreme right, which then toggle the menu. 还有一个问题是我的导航栏本身就有剩余边距，当我添加数据间谍附加功能时，导航栏稍微向右移动，导致左边的空白区域，当我将屏幕重新缩放到更小的设备尺寸时，导航栏折叠菜单是不可点击的，除非我略微点击到最右边，然后切换菜单。 I not sure why affix got such issues. 我不确定为什么词缀会有这样的问题。 How do I fix it. 我如何解决它。

THANKS FOR HELPING to resolve this issues!! 感谢帮助解决这个问题!!

Below is my code 以下是我的代码

    <html>
    <head>
    <title>Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    .navbar-header,
    .navbar-brand {
        line-height: 100px;
        height: 100px;
        padding-top: 0;
    }
    .affix .navbar-default {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        background-color: #957595 !important;
    }
    .affix {
        width: 100% !important;
    }
    @media screen and (min-width: 768px) {
    .navbar-header {
        padding-left: 200px;
        text-align: center;
    }
    }
.top-banner{
    background-color: #b0c4de;
    background-image: url("bi-uk-office7-2.jpg");
    background-repeat: no-repeat;
    background-position: right top;
}
    </style>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container-fluid">
            <!-- Static navbar -->
         <div id="nav" data-spy="affix">
          <nav class="navbar navbar-default" style="background-color:black;background: rgba(0,0,0,0.9);">
            <div class="container-fluid">
              <div class="navbar-header header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <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="#">Logo</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                  <li><a href="#"><font color="white">Link 1</font></a></li>
                  <li><a href="/list"><font color="white">Link 2</font></a></li>
                  <li><a href="/list"><font color="white">Link 3</font></a></li>
              </div><!--/.nav-collapse -->

   </div>
      </nav>
</div>

<section>
<div class="col-xs-12">

<div class="top-banner">
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
Hello world<br/>
<hr>
</div>

</div>
</section>



</div>
</body>
</html>

Answer 1

Add a z-index to your #nav as below to be on top and add margin-left property to the same to stay of extreme left as it is getting padding from its parent container-fluid 在你的#nav添加一个z-index ，如下所示，并将margin-left属性添加到相同的位置以保持极左，因为它从其父container-fluid获取填充

#nav
{
     z-index:1000;
     margin-left: -15px;
}

导航栏以覆盖背景颜色和图像

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-05-12 04:00:20

导航栏以覆盖背景颜色和图像

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-05-12 04:00:20

解决方案1
3 已采纳 2015-05-12 04:00:20