Html 滚动时主体内容与导航栏重叠

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

我在导航栏上有滚动时应该消失的内容，它工作正常。

虽然滚动导航栏应该是固定的，但工作正常。

问题是滚动时，主体内容在导航栏上滑动。它应该在导航栏后面。

我在导航栏下面有一个图像滑块

以下是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代码

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; }

我是bootstrap的初学者。

---

谢谢。

你应该把它放在小提琴上，但我猜你的导航栏应该包含

位置：绝对和
z指数：1
看到这个查询，我为您制作了JSFIDLE，请检查一下。。您正在使用“粘贴”来固定导航栏

因此，在css中只需添加以下内容：

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

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


所有的编码看起来都不错，没有问题。只需检查我的小提琴
添加
边距顶部：30px可以满足您的要求。
您可以创建fiddle吗？这里是：我尝试了绝对和相对两种方法，在这两种情况下，滚动时导航栏都会消失。感谢您提供此代码片段，它可能会提供一些有限的即时帮助。通过展示为什么这是一个很好的问题解决方案，A将极大地提高它的长期价值，并将使它对未来有其他类似问题的读者更有用。请在您的回答中添加一些解释，包括您所做的假设。
    .affix{
width:100%;
top:0px;
}