0

情况的简短草图：我正在制作一个网站（显然:)）所以我有我的标题，然后是我的横幅，在横幅下方我有我的菜单栏。但是，横幅与我的标题重叠了一点（这就是意图；））现在我想直接在横幅下方添加菜单栏。

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

}

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

我刚刚想出了一些小问题，这可能会解决我的整个问题。如果我要让我的标题成为一个盒子，然后我的主要内容是一个盒子（它包含横幅、内容和页脚）并制作所有不同的东西，比如那个盒子里的横幅子项？当我使用继承或其他功能时，这不会解决我的整个问题吗？

先感谢您！亲切的问候，大卫

4

3 回答 3

1

在您的情况下，一种解决方案是将您的菜单绝对定位在bottom:-120px. 它不是最优雅的，但它应该可以工作。

于 2013-03-15T11:28:16.203 回答
1

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

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

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

小提琴在这里

我使用背景颜色代替了您的图像您可以将菜单放在横幅的底部或您需要的任何地方。然后记住菜单后面的元素会在他的真实位置看到菜单。在这种情况下，低于 90 像素。许多解决方案都可以解决所有这些问题，因此不会影响其余的页面元素。

于 2013-03-15T11:35:56.510 回答
1

有人建议这样做的一种方法是使用菜单元素的相对定位。

例如：

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

这种方式的好处是，如果改变了header，后续元素的定位不需要调整，需要通过banner元素修改重叠度。

了解这两种方法是件好事。

于 2013-03-15T11:48:28.010 回答