RoR - 배너 이미지 내비게이션 내비게이션

Question

내비게이션 아래에 이미지가 나타나게하는 데 약간의 문제가 있습니다. 지금은 탐색 뒤에 있습니다.

각 페이지이 소개, 연락처, 기간

소개

기본 페이지 HTML 설정에 대한 고유 한 이미지가됩니다 기본 : 배너받은 위치에 대한

<header> 
    <div class="basicbanner"> 
     <%= image_tag("1280x400-about.jpg", style: "background-image", class: "img-responsive", alt: "Diving Image") %> 
    <div class="container"> 
     <div class="row"> 
     <div class="basicbanner-title center"> 
      <h1>About us</h1> 
     </div> 
     </div> 
    </div> 
    </div> 

</header> 

CSS 설정 :

.basicbanner { 
    min-height: 400px; 
    position: relative; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
} 

.basicbanner-title { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    max-width: 620px; 

    h1 { 
    text-transform: uppercase; 
    color: white; 
    } 
} 

이 설정으로 nav의 뒤쪽에 앉아서 아래에 앉으려고합니다.

충돌이 발생한 곳을 이해하지 못하고 아래의 스타일에 표시된 것처럼 몇 가지 방법을 시도해보십시오.

Navbar의 CSS의

.navbar { 
    border: 0px solid rgba(0, 0, 0, 0); 
    background: #70cbce; 
    //background: transparent; 
    margin: auto; 
    min-height: 60px; 
    padding-top: 10px; 
    position: fixed; 
    //top: -60px; 
} 

.navbar.open { 
    top: 0; 
} 

.navbar-inverse .navbar-nav > li > a, .navbar-nav a { 
    color: #fff; 
    font-size: 14px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 60px; 
    //letter-spacing: 1px; 
} 

.navbar-inverse .navbar-nav > li > a:hover { 
    color: #0a4f6f; 
    opacity: 0.6; 
} 

.nav > li > a { 
    position: relative; 
    display: block; 
    padding: 10px 10px; 
} 

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { 
    border-color: #4ec3cd; 
} 

.navbar-inverse .navbar-toggle { 
    border-color: transparent; 
} 

/* HEADER AND LOGO*/ 

.header{ 
    padding-top:40px; 
    padding-bottom:50px; 
    width: 100%; 
    font-size:18px; 
} 


#logo { 
    float: left; 
    //margin-right: 10px; 
    //font-size: 1.7em; 
    //color: #fff; 
    //text-transform: uppercase; 
    //letter-spacing: -1px; 
    margin-top: -10px; 
    //font-weight: bold; 
} 

#logo:hover { 
    color: #fff; 
    text-decoration: none; 
} 

따라서는 탐색 아래에 앉아서도 반응 적 작업을 얻을 필요가있다.

Answer 1

미안하지만, 당신이 얻으려고하는 것은 분명하지 않습니다. 왜 네비게이션 위에 image_tag를 두는거야? 탐색 HTML 코드는 탐색 위에있는 이미지 위에 있어야합니다. 그런 다음 다음 속성을 설정할 수 있습니다.

overflow: hidden; 
z-index : a negative or positive number; 

z-index는 다른 div를 만들고, 오버플로하며, 다른 하나를 계속 표시합니다. 당신이 trasparent 배경 이미지를 통해 탐색 오버 플로우를 원한다면 당신이 가져가 CSS 스타일이 작동 탐색에 마우스를 가져 가면, 탐색은, 그래서

z-index: +1; 

해야한다. 이미지가 있어야한다 :

z-index: -1; 

는 또한 당신이 다른 통해 두 개의 div의 하나를 배치해야한다, 내가 사용하고 있습니다 : 사업부 상위 사업부에 상대적으로 배치됩니다 상대적인 위치와

position: relative; 
margin-top: -70px; 

, 경우 당신은 이것을 정확히 nav div가 될 수 있고, margin-top negative로 설정하면 네비게이션 div로 넘치게 이미지가 나타납니다. 내 경우에는 내 탐색 div는 70px 높이를 사용하므로 -70px를 사용 했으므로 div에 여백과 패딩이 있는지 확인해야합니다.

나는 무엇이든 놓치지 않았고 때때로 다른 창 크기에 문제가있어서, 나는 미디어 쿼리를 사용하기를 바랍니다. 추가 정보가 필요하면 저에게 물어보십시오. 그래도 온라인 튜토리얼이 온라인으로 제공되지만 최신 검색에서 찾을 수는 없습니다.

귀하의 요구 사항을 완전히 오해 한 경우, 제발 downvote하지 마세요.

감사 안부 파브리 지오 Bertoglio