在静态网站中遇到多个div元素的问题

Question

我有一个div元素，里面有一个图像。我还有其他div元素位于这个div元素的顶部。问题是没有这些div元素，图像的顶部是可见的。但是当添加这些其他div元素时，它们似乎进入了这个图像的空间，并且图像的前30％是隐藏的，只有在我们向上滚动时才会被暴露。我不明白为什么其他div正在占用这个div元素的空间。代码如下：

.image-div{
  background-repeat: no-repeat;
  background-size: 1970px 850px;
  background-image: url("test.jpg");
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 500px;
}

#top-content{
  width: 100%;
}

#top-content-line1{
  margin-left: 130px;
  font-family: sans-serif;
  font-size: 13px;
}

#border-top{
  border-top: 1px solid;
  border-top-color: lightgrey;
  padding-bottom: 15px;
}

#menu-item{
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li{
  display:inline;
    float: left;
  padding-right: 150px;
}

#first-element{
  padding-left: 150px;
}


<div id="top-content">
    <p id="top-content-line1">address line1, line 2, pincode
        <br> <span id="restoname">NAME </span> 
    </p>
</div>
<div id="border-top"> </div>
<div id="menu-item">
  <ul>
    <li id="first-element"><a href="">Home</a></li> 
    <li><a href=" ">Our Vision</a></li> 
    <li><a href=" ">Menu</a></li> 
    <li><a href=" ">Order Online</a></li> 
    <li><a href=" ">Contact Us</a></li> 
  </ul> 
</div>
<div class="image-div"></div>

如果我删除“topfixedimg”上方的div元素，则图像似乎占用更大的空间。否则，顶部div元素似乎正在切割此div中的图像，只有当我们滚动网页时才会变得清晰。