html - 将标题图像连接到导航栏

Question

所以我的导航栏在顶部溢出了其他任何东西。我希望我的标题图像在下方连接到它，但在滚动时不跟随导航栏，只是留在原处。这是一张展示我正在处理的图片:

我想消除导航栏和标题之间的空间。

这是我的CSS:

.wrapper {
    width: 100%;
    overflow: hidden;

}
.container {
    width: 100%;
    margin: 0 auto;
}
.banner-img {
    width: 100%;
}

这是我的 HTML:

  <div id="wrapper">
    <div id="container">
        <a><img class="banner-img" src="images/banner.png"/>
    </div>
  </div>

还有我的导航栏:

CSS:

ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

ul.nav-right {
    float:right;
    list-style-type:none;
}

li.nav {
    float: left; /* Slides each element next to each other */
}

li.nav a {
    display: block;
    color: white; /* The text colour */
    text-align: center; /* This centers the text into each block */
    padding: 14px 16px; /* top and bottom paddings are 14px, and right and left paddings are 50px. */ 
    text-decoration: none; /* Ensures there is no decoration */
    font-family: "Comic Sans", Comic Sans MS, cursive;
}

HTML:

  <ul class="nav">
    <li class="nav"><a class ="active" href="default.asp">Home</a></li>
    <li class="nav"><a href="news.asp">News</a></li>
    <li class="nav"><a href="contact.asp">Contact</a></li>
    <ul class="nav-right">
        <li class="nav"><a href="about.asp">About</a></li>
    </ul>
  </ul>

还有一些可能在其中发挥作用的更多信息:

html {
    position: relative;
    min-height: 100%;
}

body {
    height: 100%;
    margin: 0 0 100px;
    padding-top: 70px;
    background-color: lightblue;
}

Answer 1

你可以这样修复 https://jsfiddle.net/p9vuz704/

有两种解决方案可以解决您的问题。

1. 将横幅图片代码放在导航栏代码中

   <div class="navbar">
...
<img class="banner-img" src="images/banner.png"/>
</div>

   .导航栏{ 位置:固定；顶部:0；

2. 只需将图像位置设置为固定和顶部:(导航栏高度)px