画像上にナビゲーションバーを置く方法は？

Question

私は私のメイン画像上に私のナビゲーションバー（@メディア最小幅50em）を横たえようとしています。私は私のnavbarの背景URLとしてmainimageを使用しようとしましたが、私は高さを調整することはできません。メイン画像をページの上部に押し込んで、ナビゲーションバーをその上に重ねる方法はありますか？ここで

は私のjsfiddleへのリンクです：ここでは

https://jsfiddle.net/shannonhart82/93ekqmhq/1/

<nav> 
     <ul> 

     <li><a href="#about">About</a> </li> 
     <li><a href="#menu">Menu</a></li> 
     <li><img class="logo" src="fjc.svg"></li> 


     <li><a href="#gallery">Gallery</a></li> 
     <li><a href="#contact">Contact</a></li> 

    </ul> 
    </nav> 




    <img class="mainimage" src="http://www.andypost.com/media/original/Andy- Post-Food-Photography-Waffle-with-Syrup.jpg" width="100%"> 


    nav li a { 
    display: inline-block; 
    background-color: #9CD5CF; 
    top: 0; 
    padding: 70px; 
    width: 150px; 
    text-decoration: none; 
    color: #000; 
    } 
    #nav-icon3 { 
    display: none; 
    } 
    nav { 
    display: block; 
    width: 100%; 
    position: relative; 
    top: 0; 
    left: 0; 
    } 
    nav li { 
    display: inline-block; 
    background-color: none; 
    color: black; 
    text-align: center; 
    vertical-align: middle; 
    } 
    nav ul { 
    text-align-last: center; 
    } 

私がしようとしているものです：NAV周りのdivを作成

Answer 1

試して、これをCSSに入れて

HTML

<div class="divclass"> 
    <nav> 
    <ul> 

    <li><a href="#about">About</a> </li> 
    <li><a href="#menu">Menu</a></li> 
    <li><img class="logo" src="fjc.svg"></li> 


    <li><a href="#gallery">Gallery</a></li> 
    <li><a href="#contact">Contact</a></li> 

</ul> 
</nav> 
</div> 

CSS

.divclass { 
    height:200px; 
    background-image: url("http://www.andypost.com/media/original/Andy- Post-Food-Photography-Waffle-with-Syrup.jpg"); 
} 

Answer 2

あなたは可能性があなたのスタイル

.nav{ 
z-index: 2; 
} 
img{ 
z-index: 1; 
} 

の残りの部分と、このような何か