武林網(www.49028c.com)文章簡介：CSS實現相對瀏覽器窗口定位徹底研究.
Web Developer / Designer 經常需要將一個元素“固定”在頁面的某個位置。例如彈出窗口、漂浮廣告位等……本文將詳細介紹簡單CSS實現元素相對于瀏覽器窗口進行定位的方法。
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的bugIE版本<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 左側固定 */新聞熱點
疑難解答
