【IE6 BUG大全】position:fixed在IE6下的實現
日期：2013-11-30 來源：攀枝花惠康網絡公司
Position屬性有四個可選值，它們分袂是：static、absolute、fixed、relative。我們下面來配合進修它們的分歧的用法，在進修中我們應該去思慮在什么結構情形下，應該使用它們其中的哪一種。
值 描述 static 默認。位置設置為 static 的元素，它始終會處于頁面流給以的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。 relative 位置被設置為 relative 的元素，可將其移至相對于頗正常位置的處所，是以 “left:20″ 會將元素移至元素正常位置左邊 20 個像素的位置。 absolute 位置設置為 absolute 的元素，可定位于相對于包含它的元素的指定坐標。此元素的位置可經由過程 “left”、”top”、”right” 以及”bottom” 屬性來劃定。 fixed 位置被設置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。此元素的位置可經由過程 “left”、”top”、”right” 以及”bottom” 屬性來劃定。非論窗口滾動與否，元素城市留在阿誰位置。工作于 IE7（strict 模式）。
<p>這是為了增添高度</p>
position:static 無定位
該屬性值是所有元素定位的默認情形，在一般情形下，我們不需要出格的去聲明它，但有時辰碰著擔任的情形，我們不愿定見到元素所擔任的屬性影響自己，年夜而可以用position:static打消擔任，即還原元素定位的默認值。
如：#nav{position:static;}
position:fixed 相對于窗口的固定定位
請出格注重，IE6及以下不撐持CSS中的position:fixed屬性。真的很是遺憾，所以我們只能經由過程JS模擬和CSS Hack等體例來實現。
1.IE前提注釋解決方案：
demo： http://www.css88.com/demo/position_fixed/POSITION_fixed2.html
XML/HTML代碼 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<p>End</p>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head> <body>
<title>position:fixed――IE前提注釋解決方案</title>
<style type=”text/css”>
<!–
body {margin: 0; padding:0}
p{ height:50px}
.fixed {padding: 10px; background: #000; left: 0px; color: #fff; position: fixed; top:0; }
其他兩種前面提過，我們 首要說的是fixed 2.CSS hack解決方案： demo： http://www.css88.com/demo/position_fixed/POSITION_fixed1.html
<p>這是為了增添高度</p>
</style>
<!–[if IE 6]>
<style type=”text/css”>*/
html{overflow:hidden;}
body{height:100%;overflow:auto;}
<p>這是為了增添高度</p>
.fixed{position:absolute;}
</style>
.fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
<!–[if lt IE 6]>
<style type=”text/css”>
</style>
<![endif]–>
<p>Begin</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<![endif]–>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<div class=fixed>position: fixed;我始終在屏幕左上角哦</div>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<!–以下是筒撿慟碼–>
<script type=”text/javascript”>initAccessKey() //轉換AccessKey For IE</script><script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=http://www.css88.com/archives/’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
<p>這是為了增添高度</p>
var pageTracker = _gat._getTracker(“UA-3448069-1″);
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
<head>
&lon: fixed; top:0; _position: absolute}
</style></head>
<body>
這個定位屬性值是什么意思呢？元素的定位體例同absolute近似，但它的包含塊是視區自己。在屏幕媒體如WEB瀏覽器中，元素在文檔滾動時不會在瀏覽器考察中移動。例如，它許可框架樣式結構。在頁式媒體如打印輸出中，一個固定元素會呈現于第一頁的不異位置。這一點可用于生成流動問題或腳注。我們也見過相似的效不美觀，但年夜都數效不美觀不是經由過程CSS來實現了，而是應用了JS劇本。
<p>Begin</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
</html>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
–>
<p>End</p>
<div class=fixed>position: fixed;我始終在屏幕左上角哦</div>
</body>
<p>這是為了增添高度</p>
可能你要將這個板塊定位在右上角或者右下角，以上2種煩死都要將right:17px;為什么不是right:0呢？
<html xmlns=”http://www.w3.org/1999/xhtml“>
<p>這是為了增添高度</p>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
如不美觀您自己做過板塊定位在右上角、右下角或者右邊的某個位置這樣的實例就會發現這個問題，其實fixed元素的絕對位置是相對于HTML元素來說，而滾動條是body元素的，這是設置right:17px的原因就是要減去這個滾動條的寬度。
3.JS模擬解決方案：
demo： http://www.css88.com/demo/position_fixed/POSITION_fixed.html
這種體例斗勁繁瑣，不做推廣了，所以也就不做具體詮釋了。
文章來源：攀枝花惠康網絡公司
惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。
（謝先生） 客服QQ：1323605005
