position:fixed生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

良好支援 W3C 標準的瀏覽器例項

在 IE9、Firefox、Chrome等良好支援 W3C 標準的瀏覽器中，如果我們希望將某元素絕對定位於視窗正中間，我們可以給它指派這樣的 CSS樣式：

width:336px;
height
 
:280px;
left:50%;
top:50%;
margin-left:-168px;
margin-top:-140px;
position:fixed;

這裡 margin-left 、margin-top 的值應該修改為您頁面主要區域寬度和高度的一半。

修正IE版本<7不支援position:fixed的bug

IE版本<7的瀏覽器不支援position:fixed屬性，所以並未實現期望的效果，這時就要針對IE<7的瀏覽器寫單獨的樣式。

（1）利用 Javascript 計算出需要的 top 值

在head中插入：

<!--[if IE lt 7]>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<![endif]-->
 

在style.css樣式表中針對目標定位元素樣式中寫入：

position:absolute;
top:expression(eval(document.body.scrollTop +50));

防止滾動條滾動時的閃動，需要定義HTMl的屬性為：

html {
    background-image: url(about: blank);/*用瀏覽器空白頁面作為背景*/
    background-attachment:fixed;/*確保滾動條滾動時，元素不閃動*/}

在 IE 中特有的 CSS 運算子 expression中我們可以利用 Javascript 計算出需要的 top 值，這樣就達到了與 position: fixed 同樣的效果。

（2）利用容器對溢位內容的處理方式來實現

定義body內外邊距為0，實現html和瀏覽器視窗相同大小，使body出現滾動條，元素相對於html相對定位。

body { padding:0; margin:0;}
html { overflow: hidden;}
body { height:100%; overflow:auto;}

針對IE6定義元素屬性:

position: absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-168px;

讓元素固定於瀏覽器

分別讓元素定位於瀏覽器左側、右側、頂部、底部綜合樣式演示：

position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));/* IE6 頭部固定 */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));/* IE6 固定右側 */

position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));/* IE6 固定底部  */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft));/* IE6 左側固定 */