兼容标准XHTML的浮动层特效的CSS实现（转载于Zeal的blog ）

本文介绍了一种利用CSS实现的浮动层特效方法，该方法可以让页面的某些元素（如导航栏）固定显示，而其余内容随滚动条滚动。通过设置body的高度、溢出属性及使用fixed和absolute定位来兼容不同浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章转载于Zeal的blog，原始链接：http://www.zeali.net/entry/62

问题来源是看到抓虾的一个页面中，其顶部的logo、导航栏以及翻页部分都不随右侧滚动条的滚动而看不见，而下面的内容部分却能自由滚动。通常见到的是滚动条显示在内容层上，这样可以实现内容滚动，但是样式不好看。抓虾这种方式让我觉得很美，心想如果用javascrip还是很容易实现的，但是很别扭，查看源代码并没有发现相关的javascript，因此应该是CSS实现的。可是对于CSS不熟悉的我用Firebug和Web Developer(两个都是FireFox用于Web开发的插件)查看了半天也没有找到原因（不过它的CSS实在太复杂，而且那么多层，不知道怎么维护）。后来上网搜到一篇blog，上面提到的CSS方法与抓虾中的方法应该是一致的，因为抓虾的CSS中有下面这么一句，

body { margin : 0 ; padding : 0 ; border : 0px ; height : 100% ; overflow-y : auto ; background : #fff ; font-size : 12px ; } /* first we must set body. */

这一句跟下面的方法是一致的。存档以纪念自己花去的好几个小时。

以下转载于Zeal的blog 兼容标准XHTML的浮动层特效实现

Updated 2005-9-23 14:24 -- 学海无涯提供了另外的一种实现移动层的方法：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< style type ="text/css" >
body {
    margin : 0 ; /* 必须 */
    border : 0 ;
    height : 100% ; /* 必须 */
    overflow-y : auto ; /* 必须 */
     }
#menu { display : block ; top : 10px ; left : 150px ; width : 130px ; position : fixed ; } /* IE并不认识fixed，而FF认识 */
* html #menu { position : absolute ; } /* 这个只有IE认识 */

</ style >

</ head >

< body >
< div >
< ul style ="list-style-type:decimal" >
< script language =javascript >
for (i = 0 ;i < 500 ;i ++ ) document.write( ' <li></li> ' );
</ script ></ ul >
</ div >
< div id ="menu" >
< img src ="http://www.cnblogs.com/images/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
</ div >
</ body >
</ html >

据说IE7已提供了fixed的支持。使用上面的代码你必须注意：body里的元素不能有 position:relative ，否则这个元素将不会滚动。