網頁中我們經常遇到一些固定在頁面中某個位置的返回頂部、分享等小按鈕，它不會跟隨滾動條改變位置。如下圖：
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>