我正在尝试将我的导航栏(@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;
}
以下是我要做的事情:
答案 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>