절대적으로 배치 된 부트 스트랩 navbar는 상대적으로 배치 된 배너 이미지 위에 놓이지 않습니다.

위치 : relative를 사용하는 배너 이미지가 있습니다. 위치가있는 래퍼의 내부 : relative; 부트 스트랩 navbar-static-top을 추가했습니다. 내 목표는 navbar가 배너 이미지 위에 놓 이도록하는 것이 었습니다. 지금까지 일부 요소의 위치를 변경하려고 시도했지만 최선의 노력에도 불구하고 여전히 navbar와 배너 이미지 사이에 공백이 생깁니다. 나는 그것이 사용하고있는 navbar 클래스 중의 하나와 관련이 있다고 믿지만 어느 것이 확실하지 않다. 다음은 관련 HTML5 및 CSS3 코드입니다. 부트 스트랩에서절대적으로 배치 된 부트 스트랩 navbar는 상대적으로 배치 된 배너 이미지 위에 놓이지 않습니다.

.wrapper { 
 
\t position: relative; 
 
\t padding: 0 15px; 
 
} 
 

 
#banner { 
 
\t height: 50vh; 
 
\t width: 100vw; 
 
\t position: relative; 
 
} 
 

 
#responsive-nav { 
 
\t background-color: transparent; 
 
\t position: absolute; 
 
\t z-index: 2; 
 
\t 
 
} 
 

 
#logo { 
 
\t position: absolute; 
 
\t top: 15px; 
 
\t left: 60px; 
 
\t z-index: 1; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Mock Up</title> 
 
    <!-- Custom CSS --> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <!-- Bootstrap Link --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
\t <div class="nav-wrapper"> 
 
    <nav class="navbar navbar-static-top"> 
 
     <!--Navbar--> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
 
        <!-- Collapsing Hamburger Buttons for mobile --> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button>   
 
      </div> 
 
      <!--Menu Items--> 
 
      <div class="collapse navbar-collapse navbar-right" id="mainNavBar"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="nav-item"> 
 
         <a href="#about">Home</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a href="#work">Projects</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a href="#contact">Contact</a> 
 
        </li> 
 
        
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
       <div class="wrapper"> 
 
       <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1"> 
 
       <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
    </nav> 
 
    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

출처

2017-09-19 Dylan Davenport

navbar 클래스는 마진이 바닥을 제공합니다 : 20 픽셀. 당신은

.wrapper { 
 
\t position: relative; 
 
\t padding: 0 15px; 
 
} 
 

 
#banner { 
 
\t height: 50vh; 
 
\t width: 100vw; 
 
\t position: relative; 
 
} 
 

 
#responsive-nav { 
 
\t background-color: transparent; 
 
\t position: absolute; 
 
\t z-index: 2; 
 
\t 
 
} 
 

 
#logo { 
 
\t position: absolute; 
 
\t top: 15px; 
 
\t left: 60px; 
 
\t z-index: 1; 
 
} 
 
.navbar { 
 
    margin-bottom: 0px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Mock Up</title> 
 
    <!-- Custom CSS --> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <!-- Bootstrap Link --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
\t <div class="nav-wrapper"> 
 
    <nav class="my-class navbar navbar-static-top"> 
 
     <!--Navbar--> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar"> 
 
        <!-- Collapsing Hamburger Buttons for mobile --> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button>   
 
      </div> 
 
      <!--Menu Items--> 
 
      <div class="collapse navbar-collapse navbar-right" id="mainNavBar"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="nav-item"> 
 
         <a href="#about">Home</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a href="#work">Projects</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
         <a href="#contact">Contact</a> 
 
        </li> 
 
        
 
       </ul> 
 
      </div> 
 
      </div> 
 
     
 
       <div class="wrapper"> 
 
       <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1"> 
 
       <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1"> 
 
      </div> 
 
      
 
     
 
     
 
    </nav> 
 
    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

출처

2017-09-19 19:06:48 jass

이 밤은가 눈살을 찌푸리게 무엇 일부는 을 사용하는 네비게이션 바와 이미지 사이의 공간을 제거하는 것이 중요하여, 마진이 바닥을 대체 할 수 있습니다! 중요? –

태그를 닫을 때 약간의 불일치가 있었기 때문에! important를 사용하지 않고 변경 사항을 선택하지 않았습니다. 위 코드에서 코드를 업데이트했습니다. 부트 스트랩 CSS 파일 전에 CSS를로드하는 경우 style.css의 스타일이 부트 스트랩 스타일보다 우선합니다. – jass

절대적으로 배치 된 부트 스트랩 navbar는 상대적으로 배치 된 배너 이미지 위에 놓이지 않습니다.

답변

관련 문제