如何将导航栏放在图像上?

时间:2016-04-01 02:15:32

标签: css

我正在尝试将我的导航栏(@media min width 50em)放在我的主图像上。我已经尝试使用mainimage作为导航栏的背景网址,但我无法调整高度。有没有办法将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;
   }

以下是我要做的事情:

img

2 个答案:

答案 0 :(得分:1)

你可以用其他款式

来做这样的事情
.nav{
z-index: 2;
}
img{
z-index: 1;
}

答案 1 :(得分:0)

尝试在nav周围创建一个div,并将其放在css

html

.gitignore

<强> CSS

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