RoR - バナー画像の背後にはナビゲーションがありません

Question

画像をナビゲーションの下に置くためにいくつかの基本的なトラブルがあります。現時点では、ナビゲーションの後ろに座っています。バナーPostionため

<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; 
    } 
} 

各基本的なページはお問い合わせ、お問い合わせ、ターム

基本的なページのHTMLのセットアップのためのユニークなイメージを持っています

この設定では、それはnavの後ろにまだ座って、それが下に座るようにしようとしています。

競合が起きている場所を理解しておらず、以下のスタイリングのようにいくつかの方法を試みました。

ナビゲーションバー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; 
} 

だから、NAVの下に座っても応答動作するように取得する必要があります。

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; 

をさらに次の2つのdiv要素に他の上で1つを配置する必要があり、私が使用しています位置して

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

を場合は相対divが、比較的親のdivに配置されますこれをnav divとし、margin-top negativeを指定すると画像が上がり、ナビゲーションdivでオーバーフローします。私のケースでは、私のナビゲーションdivは70pxの高さを持っていましたので、-70pxを使用しました。divに余白とパディングがあるかどうかを確認する必要があります。

私は何も見逃していないと私は時々異なるウィンドウサイズに問題があると思うので、私はmediaqueriesを使用します。あなたが私に尋ねることができる任意の追加情報については、まだこれを行う方法についてチュートリアルがありますが、私は最新の検索でそれらを見つけることができませんでした。

私があなたの要件を完全に誤解している場合は、私がdownvoteをしないでください。私はこれがあなたが達成しようとしているものです。

おかげ 敬具 ファブリツィオBertoglio