不知道您是否留意了，瀏覽本站時(shí)，瀏覽器右下角有一個(gè)標(biāo)著
top的黑色直角三角形，可以點(diǎn)擊它返回到正在瀏覽的網(wǎng)頁頁眉。當(dāng)滾動網(wǎng)頁時(shí)，它的位置一直沒有任何改變，您感覺它怎么樣？這就是通過CSS的定位屬性
{position:fixed}來實(shí)現(xiàn)的，通過它可以讓HTML元素脫離文檔流固定在瀏覽器的某個(gè)位置。
- IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易實(shí)現(xiàn)（《詳解定位與定位應(yīng)用》）
- IE6不支持該屬性，但是在使用!DOCTYPE 聲明指定standards-compliant（標(biāo)準(zhǔn)）模式可以通過CSS hack實(shí)現(xiàn)
- 上述聲明下IE5和IE5.5目前沒有發(fā)現(xiàn)通過純粹CSS能夠解決的方案，但是可以通過IE特有的expression在CSS中實(shí)現(xiàn)（移動網(wǎng)頁時(shí)固定元素會動），這和常見浮動Logo廣告利用Javascript實(shí)現(xiàn)原理是一樣的，只不過可以直接寫在CSS中比較簡便的
- 利用IE獨(dú)有的條件注釋語句可以針對不同的IE版本精確設(shè)置，同時(shí)避免了這些代碼被其他瀏覽器讀到，個(gè)人認(rèn)為比純粹的CSS Hack好，如果你安裝了多個(gè)IE（包括綠色版本），條件注釋將會以最高版本的IE為標(biāo)準(zhǔn)。
實(shí)現(xiàn)代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......} 針對IE7、Opera、Firefox一行搞定
</style>
IE6中利用容器對溢出內(nèi)容的處理方式來實(shí)現(xiàn)的
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
fixed元素的絕對位置是相對于HTML元素來說，滾動條是body元素的，這是設(shè)置right:17px的原因
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
#fixed{position:absolute;top:(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代碼演示1（單個(gè)IE，純粹通過條件注釋區(qū)分IE瀏覽器）
代碼演示2（多個(gè)IE，通過條件注釋+CSS hack區(qū)分IE瀏覽器，明顯的比純粹條件注釋復(fù)雜且不易讀，放上來主要是便于同個(gè)PC擁有多個(gè)IE瀏覽器朋友[一般應(yīng)該做是web開發(fā)的]可以直接看到效果，下同。）
或許有人像我一樣，在!DOCTYPE 聲明是XHTML1.0 Strict或者是XHTML1.1時(shí)，喜歡在聲明前面加上XML
Prolog(如：<?xml version="1.0"
encoding="utf-8"?>)，但此時(shí)IE7以下都處于Quirks（兼容）模式，所以上述針對IE6的Hack失效，這個(gè)時(shí)候你可以對
IE6也通過expression來實(shí)現(xiàn)。
當(dāng)IE6處于quriks模式時(shí)，IE6和IE5.5對CSS解析方式幾乎雷同，所以當(dāng)看到《position:fixed for Internet Explorer》時(shí)，我找到了在Quirks模式下IE6/IE5.5/IE5統(tǒng)一的CSS解決方案：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www./TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www./1999/xhtml" xml:lang="zh" lang="zh">
<head>
......
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
......
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
