부트 스트랩 4 navbar가 작동하지 않음

Question

안녕하세요 저는 bootbar 4의 이미지 위에 navbar를 놓으려고 삼진하고 있습니다 ... 왜 작동하지 않는지 모르겠지만 이미 두 요소에 CSS 속성을 설정했지만 아무 일도 일어나지 않습니다 ... 여기에 내 코드 :

<header> 
     <nav class="navbar navbar-toggleable-md navbar-light"> 
       <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
       </button> 
       <a class="navbar-brand" href="#">Navbar</a> 

       <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
        <ul class="navbar-nav mr-auto"> 
          <li class="nav-item active"> 
           <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
          </li> 
          <li class="nav-item"> 
           <a class="nav-link" href="#">Link</a> 
          </li> 
          <li class="nav-item"> 
           <a class="nav-link disabled" href="#">Disabled</a> 
          </li> 
        </ul> 
       </div> 
     </nav> 

     <img src="http://lorempixel.com/output/nature-q-c-1347-640-8.jpg" class="img-fluid" alt="Responsive image"> 
    </header> 

CSS

nav{ 
    position: absolute !important; 
    z-index: 10 ; 
    background-color: transparent; 
    } 

Answer 1

이 나를 위해 작동하는 것 같다,하지만 당신이 대답을 적절한 컨텍스트를 제공하지 않았기 때문에이 당신을 위해 작동하는지 알 하드 조금 질문. 정확히 무엇을 성취하려고합니까?

<style> 
nav { 
    position: absolute; 
    background: red; 
} 

img { 
    position: absolute; 
} 
</style> 

<header> 
    <img src="http://lorempixel.com/output/nature-q-c-1347-640-8.jpg" class="img-fluid" alt="Responsive image"> 
    <nav class="navbar navbar-toggleable-md navbar-light"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">Navbar</a> 
     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link disabled" href="#">Disabled</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</header> 

Answer 2

다음은 문제를 해결하는 방법입니다. 이렇게하면 이미지가 항상 내비게이션 뒤에 있으며 내비게이션 (접힌 지 아닌지)이 겹치게됩니다.

내비게이션에서 position: absolute;을 삭제하고 대신 이미지 위에 올립니다.

.background-image { 
    position:absolute; 
    top: 0; 
} 

그런 다음 이미지에 .background-image 클래스를 추가했습니다. 내 작업은 여기 codepen 참조 :

http://codepen.io/egerrard/pen/JEKrNb

Answer 3

난 당신이 뭔가를 만들고 싶어 생각합니다. css 좀 봐 그 이미지 클래스 overimg에 여분의 클래스를 추가했습니다. 질문이 있으시면 저에게 의견을 물어보십시오. 당신이 CSS로 달성하려고하는 무엇 Fiddle

.overimg { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.navbar { 
 
    position: relative; /*By default its relative*/ 
 
    z-index: 1; 
 
    opacity: 0.7;/*Set this opacity for a visiable background through navbar*/ 
 
    background-color: #fff; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha256-rr9hHBQ43H7HSOmmNkxzQGazS/Khx+L8ZRHteEY1tQ4=" crossorigin="anonymous" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha256-+kIbbrvS+0dNOjhmQJzmwe/RILR/8lb/+4+PUNVW09k=" crossorigin="anonymous"></script> 
 

 
<header> 
 
    <nav class="navbar navbar-toggleable-md navbar-light"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 

 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
     <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
    <img src="http://lorempixel.com/output/nature-q-c-1347-640-8.jpg" class="img-fluid overimg" alt="Responsive image" /> 
 
</header>