在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
padding:0px
margin:0px
}
body, ul, li{
background-color:white
font-size:12px
font-family:Arial, Helvetica, sans-serif
text-align:center
}
#main{
width:20px
height:1000px
margin:0px auto
background-color:#CCC
}
#nav{
width:500px
margin:0px auto
position:fixed/*固定作用*/
top:0px
left:490px
/*ie6下样式，加下划线表示只针对ie6 的hack */
_position:absolute/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px")/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index:9999/* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
text-align:left
}
a{
color:#000000
text-decoration:none
}
.menu{
width:120px
height:18px
margin:0px 4px 0px 0px
background-color:#F5F5F5
color:#999999
border:1px solid #EEE8DD
padding:6px 0px 0px 0px
overflow-y:hidden
cursor:hand
display:inline
list-style:none
font-weight:bold
float:left
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu"><a href="#">前台专区</a></li>
<li class="menu"><a href="#">后台专区</a></li>
<li class="menu"><a href="#">交流专区</a></li>
</ul>
</div>
<div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
</body>
</html>
上面的代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，然后将top值设置为0即可，但是仅仅使用position:fixed还是不够，因为IE6浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可:
_position:absolute/* 把导航栏位置定义为绝对位置 关键*/
_top:expression(documentElement.scrollTop + "px")/* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
这位网友你好，你遇到的是Margin垂直外边距合并问题，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下
(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己
“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的
border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
详细介绍你可以看一下下面我上传的文章，或者搜一下相关资料
哇靠 你这个怎么这么复杂<style>
#ft{background:url(图片地址) repeat-x scroll center center !importantcolor:#FFFFFF !importanttext-indent:-9999pxheight:33px !importantpadding-top:356px}
#xt{background:url(小图地址) no-repeat位置自己调}
</style>
<div id="ft"></div>这样用就可以了，干嘛样式前面要写那么多东西啊
你这个问题是想问什么的？
想再一张小图覆盖在上面就在这个div里面再嵌一个div啊
<div id="ft"><div id="xt">里面的这个div就是显示小图的地方了</div></div>
