CSS實現元素相對於瀏覽器視窗進行定位

來源:互聯網
上載者:User

文章簡介: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的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 左側固定 */


相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。