Question

情况的简短草图：我正在建立一个网站（显然:)）所以我有我的标题，然后是我的横幅，在横幅下方我有我的菜单栏。但是，横幅重叠我的标题（这是意图;））现在我想在横幅下方添加菜单栏。

这是我的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;

}

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

我刚想出一些小东西，这可能会解决我的整个问题。如果我要将我的标题设为一个方框，然后我的主要内容是一个方框（其中包含横幅，内容和页脚）并制作所有不同的内容，例如该框中的横幅子项？当我使用继承或任何函数时，这不会解决我的整个问题吗？

提前谢谢！亲切的问候，大卫

Answer 1

在您的情况下，一个解决方案是将菜单绝对定位在bottom:-120px。它不是最优雅的，但应该有效。

Answer 2

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

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

您看到的空间是因为普通文档流中的菜单位于横幅所在位置的正下方。（从实际位置向上移动了90px）

小提琴here

我用的是背景色，而不是你的图像您可以将菜单放在横幅底部或任何需要的位置。然后记住菜单后面的元素将看到菜单在他的真实位置。在这种情况下90px以下。许多解决方案包装所有这个问题，所以不会影响页面元素的其余部分。

Answer 3

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

例如：

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

并且CSS看起来像：

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

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

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

首先，这是一个小提琴：http://jsfiddle.net/audetwebdesign/9gvTG/

替代方法
您可以通过使用负边距来实现类似的效果：

.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;
}

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

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

CSS：横幅和菜单位置

3 个答案: