본문 내용이 스크롤 할 때 네비게이션 바가 겹치다

Question

페이지를 스크롤하는 중에 오류가 발생하면 본문 내용이 네비게이션 막대와 겹칩니다.

1. 스크롤 할 때 사라져야하는 콘텐츠가 navbar 위에 있습니다. 정상적으로 작동합니다.
   
2. 스크롤하는 navbar가 수정되어야하지만 정상적으로 작동합니다.
   
3. 스크롤하는 동안 신체 내용이 네비게이션 바 위로 미끄러 져가는 문제가 있습니다. 그것은 navbar 뒤에서 가야합니다. 네비게이션 바의

   <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 코드
   

4. 나는 네비게이션 바 아래 이미지 슬라이더 여기

는 HTML 파일의 코드가

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

당신은 바이올린에 넣고해야하지만, 박쥐 나는 당신의 네비게이션 바에는 그냥 확인을 위해 내가 jsfiddle을 한이 쿼리를보고에 position:absolute; 및

Answer 2

z-index:1;를 포함해야한다고 생각 것입니다 .. 당신을 위해 부착 사용 navbar 고정. Z- 인덱스 같은 nabvar에 대한 높은 가치를 유지

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

을 그리고 당신의 네비게이션 바의 Z- 인덱스 확인 : CSS를 너무

바로 다음에 추가 9999;

JSfiddle link

모든 코딩은 그와 전혀 문제가 좋아 보인다. 그냥 내 바이올린을 확인하십시오