将标题图像连接到导航栏

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>

   .navbar {   位置：固定;顶部：0; }

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

Answer 2

这个问题似乎是你身上的填充物。您的导航高度小于70像素，因此padding-top: 70px会在图像和导航栏之间显示空格。

为了解决这个问题，您必须将padding-top值设置为导航栏的确切高度。您还需要确保导航栏始终具有相同的高度，或者如果导航栏高度发生变化，则填充顶部值会发生变化。

在我的浏览器上，导航栏的高度为51px，所以你的身体css看起来像这样：

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