定位“包装纸” div在固定导航栏下面? [英] Positioning a "wrapper" div underneath a fixed navigation bar?
问题描述
我开始在一个全新的网站上工作,我已经玩了一段时间的设计,但我似乎有一个问题是关于定位导航栏的全屏幕宽度固定为滚动。下面我创建了一个名为wrapper的 div ,它的宽度设置为
980px
。下面是代码示例;
I've started work on a brand new site and i've been playing around with designs for a while, however one problem I seem to be having is regarding positioning a navigation bar with a full screen width that is fixed to scroll. Underneath i have created a div
called "wrapper" which is set to centre at a width of 980px
. Below is code example;
<style>
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
}
#wrapper {
margin: 0 auto;
width: 980px;
}
</style>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div>
</div>
在wrapper中创建的框应该显然不是因为我做错了 - 某处)坐在 navBar
下面 5px
,但是因为我使用 position:fixed
它位于它的下面。任何人都可以告诉我我如何解决这个问题,让它包装器正下方而不是下面的navbar,同时保持它的中心?
The box i created within "wrapper" SHOULD (obviously isn't because i'm doing something wrong - somewhere) sit 5px
below the navBar
, however because I have used position: fixed
it sits underneath it instead. Could anybody lead me to how I solve this issue and have it so that the wrapper sits directly below rather than underneath the navbar whilst maintaining it's centering?
推荐答案
设置 top:0
,并在 wrapper
div
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top:0
}
#wrapper {
margin: 30px auto 0;
width: 980px;
}
http://jsfiddle.net/duncan/NkRxQ/
这篇关于定位“包装纸” div在固定导航栏下面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!