纯CSS实现固定定位position:fixed（兼容IE6）
网页中我们经常遇到一些固定在页面中某个位置的返回顶部、分享等小按钮，它不会跟随滚动条改变位置。如下图：
CSS实现固定定位最简便的是position:fixed;但是IE6不支持fixed，要实现IE6下的固定定位方法有多种，比如通过js、css表达式，这里分享一种纯CSS的解决方法。
原理：把需要固定定位的元素相对于html定位，并保证html不产生滚动条，然后把body的高度设置为窗口的高度，内容溢出时body产生滚动条，这样在视觉上元素始终保持在浏览器窗口的固定位置。
具体实现代码如下，供参考：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>纯CSS实现固定定位position:fixed（兼容IE6）</title> 6 </head> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 .wrap { 13 width: 960px; 14 height: 1500px; 15 border: 1px dashed #666; 16 background: #FCF; 17 margin: 0 auto; 18 } 19 .upBtn { 20 width: 100px; 21 height: 100px; 22 border: 1px dashed #f00; 23 background: #06F; 24 position: fixed; 25 right: 0; 26 bottom: 0; 27 } 28 html, body { 29 _height: 100%;/*浏览器窗口高度*/ 30 } 31 html { 32 _overflow: hidden;/*避免html产生滚动条*/ 33 } 34 body { 35 _overflow: auto;/*body内容溢出产生滚动条*/ 36 } 37 .upBtn { 38 _position: absolute; 39 _right: 17px;/*upBtn相对于html定位的，避免覆盖body产生的滚动条*/ 40 } 41 </style> 42 <body> 43 <div class="wrap"> 44 <p>跨浏览器css固定定位position:fixed;</p> 45 </div> 46 <div class="upBtn">返回顶部</div> 47 </body> 48 </html>
