Html CSS:Banner&；菜单公告

情况简介：我正在创建一个网站（显然：），所以我有我的标题，然后是我的横幅，在横幅下面是我的菜单栏。然而，横幅与我的标题重叠了一点（这就是目的；），现在我想在横幅的正下方添加菜单栏

以下是我的CSS代码：

.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}

.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}

.menu {
background: url(../images/menubalk.png) no-repeat top center;

}

如果横幅没有重叠，菜单栏就在我应该在的位置

我刚刚想出了一些小办法，可能会解决我的整个问题。如果我把我的页眉做成一个框，然后把我的主要内容做成一个框（里面有横幅、内容和页脚），然后做成所有不同的东西，比如那个框中的横幅子项？当我使用inherit或其他函数时，这难道不能解决我的整个问题吗

提前谢谢你！ 亲切问候,，

---

David

在您的情况下，一个解决方案是将菜单绝对位置置于

底部：-120px

。这不是最优雅的一个，但它应该可以工作。

在您的情况下，一个解决方案是将菜单绝对定位在

底部：-120px

。这不是最优雅的一个，但它应该可以工作。

您也应该为菜单指定一个相对位置。与横幅具有相同的最高价值

 .menu {
    ....
    ....
    position: relative;
    top:-90px;
  }

您看到的空间是因为在正常文档流中，菜单位于横幅所在位置的正下方。（从其实际位置上移90像素）

小提琴

我用背景色代替你的图片 你可以把菜单放在横幅的底部或你需要的地方。

---

然后记住，菜单后面的元素将看到菜单的真实位置。在本例中为90px。许多解决方案包装了所有这些问题，因此不会影响页面的其余元素。

您还应该为菜单指定一个相对位置。与横幅具有相同的最高价值

 .menu {
    ....
    ....
    position: relative;
    top:-90px;
  }

您看到的空间是因为在正常文档流中，菜单位于横幅所在位置的正下方。（从其实际位置上移90像素）

小提琴

我用背景色代替你的图片 你可以把菜单放在横幅的底部或你需要的地方。

---

然后记住，菜单后面的元素将看到菜单的真实位置。在本例中，90px如下。许多解决方案包装了所有这些问题，因此不会影响页面的其余元素。

建议了一种方法，使用菜单元素的相对定位

例如：

<div class="header_container">
    Le Header Container
</div>
<div class="banner">
    Le Banner
</div>
<div class="menu">
    Le Menu
</div>

首先，这里有一把小提琴：

替代方法
使用负边距可以实现类似效果：

.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}

.banner {
background-color: yellow;
position: relative;
height: 210px;
}

.menu {
background-color: red;
position: relative;
height: 50px;
}

这种方法的优点是，如果更改标题并且需要修改横幅元素的重叠程度，则不需要调整后续元素的位置

---

了解这两种方法是很好的。

已经提出了一种方法，使用菜单元素的相对定位

例如：

<div class="header_container">
    Le Header Container
</div>
<div class="banner">
    Le Banner
</div>
<div class="menu">
    Le Menu
</div>

首先，这里有一把小提琴：

替代方法
使用负边距可以实现类似效果：

.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}

.banner {
background-color: yellow;
position: relative;
height: 210px;
}

.menu {
background-color: red;
position: relative;
height: 50px;
}

这种方法的优点是，如果更改标题并且需要修改横幅元素的重叠程度，则不需要调整后续元素的位置

---

了解这两种方法很好。

谢谢，但不幸的是，问题仍然存在。下面的图层现在都处于低于其应有的位置。因此，我猜我必须在我的.banner中更改一些内容，以便修复所有这些内容。这也取决于您的html。谢谢，但不幸的是，问题仍然存在。下面的图层现在都处于低于其应有的位置。因此，我猜我必须在我的.banner上更改一些内容，以便修复它们。这也取决于你的html。尝试创建一个复制你的问题的fiddle（），以便更好地理解它。尝试创建一个复制你的问题的fiddle（），以便更好地理解它。