트위터 부트 스트랩 헤더의 Z- 인덱스 문제

Question

다음 코드는 Twitter 부트 스트랩 헤더를 생성합니다. 헤더는 기능면에서 훌륭하게 작동하지만 작은 브라우저를 사용하면 헤더가 드롭 다운 메뉴로 최소화되어 헤더의 배경이 웹 페이지의 사물 앞에 표시되지 않습니다. 예를 들어 헤더의 텍스트가 앞에 표시되지만 이미지 및 텍스트 입력과 같은 내용이 드롭 다운 배경 앞에 표시됩니다. 나는 트위터의 부트 스트랩 CSS를 변경하지 않았으며 여기에 내 HTML이있다 :

<div class="navbar navbar-fixed-top"> 
       <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </a> 
        <a class="brand" href="/">Exployre</a> 
        <div class="nav-collapse"> 
        <ul class="nav"> 

         <li><a href="/map">Find</a></li> 
         <li><a href="/shareadventure">Share</a></li> 
         <li><a href="/connect">Connect</a></li> 
         <li><a href="/posts">Discuss</a></li> 
         <li><a href="/profile">Profile</a></li> 
         <li><a href="/about">About</a></li> 
         <li> 
        <li>   
       <form action="/search" class="navbar-search"> 
        <div> 
        <input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" /> 
        </div> 
       </form> 
        </li> 

        </ul> 
        </div><!--/.nav-collapse --> 
       </div> 
       </div> 
      </div> 

Answer 1

디자인 문제? 어쩌면합니다 (CSS 스타일 시트는 변경하지 않은 경우 아무것도)

이 선택이 CSS 속성이

.navbar-fixed-top, .navbar-fixed-bottom { 
    position: fixed; 
    /* other properties */ 
} 

하지만 미디어 쿼리가이

@media (max-width: 979px) 
.navbar-fixed-top, .navbar-fixed-bottom { 
    position: static; 
} 

를 얻을 후 position: static;가 범인이라고

... relative/fixed이거나 단순히 제거해야합니다.

소스 :

....position: static means "Ignore all the positioning instructions from left, top, z-index, etc."