滚动时正文内容重叠导航栏

Question

我在滚动页面时遇到错误，正文内容与导航栏重叠。

1. 导航栏上的内容在滚动时应该消失，它工作正常。
   
2. 虽然应该修复滚动导航栏，但它工作正常。
   
3. 问题在于滚动时，正文内容在导航栏上滑动。它应该从导航栏后面。
   
4. 我在导航栏下方有一个图像滑块

这是HTML文件的代码：

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
        <div class="row">
            <div class="col-sm-4" style="background-color:yellow; width:200px">
                <img class="img-responsive img-rounded pull-left" src="img/logo 1.png" alt="Chania" width="200" height="200">
            </div>
            <div class="col-sm-4" style="background-color:pink;">
                <h3>Fixed (sticky) navbar on scroll</h3>
                <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
                <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
            </div>
            <div class="col-sm-4 text-right" style="background-color:yellow;width:200px;">
                <img class="img-responsive img-rounded pull-right" src="img/logo 2.png" alt="Chania" width="200" height="200">
            </div>
        </div>
    </div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Menu</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    menu name..
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                </form>
            </div>
        </div>
    </nav>

导航栏的CSS代码：

.affix {
top: 0;
width: 100%; }

.affix + .container-fluid {
padding-top: 70px; }

滑块的 CSS 代码

html, body {
height: 100%;}

.carousel, .item {
height: 70%; }

.carousel-inner {
height: 143%; }

.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover; }

我是引导程序的初学者。 谢谢。

Answer 1

你应该把它放在一个小提琴中，但我猜你的导航栏应该包含position:absolute;和z-index:1;

Answer 2

看到这个查询，我已经为你制作了 jsfiddle，只需检查一下即可。你正在使用词缀来修复导航栏。

所以在 css 中只需添加以下内容：

    .affix{
width:100%;
top:0px;
}

并检查导航栏的 z-index 为 nabvar 保持较高的值，例如 z-index:9999；

JSfiddle link

所有的编码看起来都不错，没有问题。看看我的小提琴

Answer 3

在主容器中添加 margin-top:30px; 可以满足您的要求。