CSS：横幅和菜单位置

情况简述：我正在制作一个网站（显然:)），所以我有我的标题，然后我的横幅和横幅下面我有我的菜单栏。然而，横幅与我的标题重叠了一点（这就是意图;）），现在我想直接在横幅下面添加菜单栏。CSS：横幅和菜单位置

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

}

的菜单栏在那里我应该是，如果旗帜不会有重叠的位置。

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

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

来源

2013-03-15 David Vandenbroucke

尝试创建一个复制问题以更好地理解它的小提琴（http://jsfiddle.net）。 – 2013-03-15 11:35:50

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

例如：

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

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

很好地了解这两种方法。

来源

2013-03-15 11:48:28

你的情况的一个解决方案将您的菜单绝对位置在bottom:-120px。这不是最优雅的，但它应该工作。

来源

2013-03-15 11:28:16

谢谢，但不幸的是问题仍然存在。以下各层现在都处于比他们应该低的位置。所以我猜我必须改变我的.banner中的内容才能解决所有问题。 – 2013-03-15 11:31:18

也取决于你的html。 – 2013-03-15 11:32:34

你应该为你的菜单指定一个相对位置。随着最大价值相同的旗帜

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

您所看到的空间是因为菜单，在正常文档流，只是下面的图标所在的位置定位。

小提琴here

您的图像，而不是（这是从它的实际位置移90像素时）我使用的背景颜色您可以直接在你的旗帜的底部或在任何你需要的地方菜单。然后记住菜单后面的元素将在他的真实位置看到菜单。在这种情况下90px以下。许多解决方案来包装所有这个问题，所以不会影响其余的页面元素。

来源

2013-03-15 11:35:56 Fico

CSS：横幅和菜单位置

回答

相关问题