<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>position: fixed</title> <style type="text/css"> * { padding: 0; margin: 0; } #content { height: 5000px; width: 50%; border-right: 10px dotted red; } #demo_t, #demo_b, #demo_l, #demo_r { background: #f90; position: fixed; } #demo_t, #demo_b { left: 0; width: 100%; } #demo_l, #demo_r { width: 50px; top: 300px; } #demo_t { top: 0; } #demo_b { bottom: 0; } #demo_l { left: 0; } #demo_r { right: 0; } </style> <!--[if lte IE 6]> <style type="text/css"> html { /*这个可以让IE6下滚动时无抖动*/ background: url(about:black) no-repeat fixed } #demo_t, #demo_b, #demo_l, #demo_r { position: absolute; } #demo_t, #demo_b { /*这个解决body有padding时，IE6下100%不能铺满的问题*/ width: expression(offsetParent.clientWidth); } /*下面三组规则用于IE6下top计算*/ #demo_l, #demo_r { top: expression(offsetParent.scrollTop + 300); } #demo_t { top: expression(offsetParent.scrollTop); } #demo_b { top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight); } </style> <![endif]--> </head> <body> <div id="demo_t">此处显示 id "demo" 的内容</div> <div id="demo_b">此处显示 id "demo" 的内容</div> <div id="demo_l">此处显示 id "demo" 的内容</div> <div id="demo_r">此处显示 id "demo" 的内容</div> <div id="content"></div> </body> </html>
原文：http://www.cnblogs.com/mmcmmc/p/3941403.html
