新聞中心
CSS中position屬性有4種可選值:static,relative,absolute,fixed,用于定位html元素的位置,并影響元素塊生成的方式。這里向大家描述一下position:fixed 的使用,此屬性元素的定位方式同absolute類似,但它的包含塊是視區(qū)本身。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),東西湖企業(yè)網(wǎng)站建設(shè),東西湖品牌網(wǎng)站建設(shè),網(wǎng)站定制,東西湖網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,東西湖網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
使用CSS的position:fixed
Position的英文原意是指位置、職位、狀態(tài)。也有安置的意思。在CSS布局中,Position發(fā)揮著非常重要的作用,很多容器的定位是用Position來完成。
Position屬性有四個可選值,它們分別是:static、absolute、fixed、relative。
position:fixed 相對于窗口的固定定位
這個定位屬性值是什么意思呢?元素的定位方式同absolute類似,但它的包含塊是視區(qū)本身。在屏幕媒體如WEB瀏覽器中,元素在文檔滾動時不會在瀏覽器視察中移動。例如,它答應(yīng)框架樣式布局。在頁式媒體如打印輸出中,一個固定元素會出現(xiàn)于***頁的相同位置。這一點可用于生成流動標(biāo)題或腳注。我們也見過相似的效果,但大都數(shù)效果不是通過CSS來實現(xiàn)了,而是應(yīng)用了JS腳本。
注意:IE6不支持CSS中的position:fixed屬性。
我們都知道CSS中定位屬性position的值,除了默認(rèn)的值外,還有absolute,relative和fixed。我平時比較常用absolute和relative,而position:fixed卻沒多關(guān)注?;蛟S是因為當(dāng)初在CSS中文手冊中看到position:fixed旁邊有說明“IE5.5及NS6尚不支持此屬性”吧。
前段時間,在做一個項目時需要使一個層相對于瀏覽器邊框固定,那時用position:absolute試了下,發(fā)覺absolute是對網(wǎng)頁邊框而言的。后來,上網(wǎng)查了一些根據(jù)滾動條的移動,動態(tài)地改變left和top的值的JavaScript語句,雖然能實現(xiàn)了類似的效果,但滾動條移動時,那個層晃來晃去的,感覺不好看,想要一種能使層固定不動的做法。
且看下面的代碼:
我們用上面這段代碼來定義頁面上的一個層“help”(id=“help”)。這樣就能實現(xiàn)我們想要的效果了。在IE8、Firefox、Opera、Google等瀏覽器中測試,都沒有問題,唯獨低版本的IE中,這個屬性無效。
當(dāng)前題目:CSS中position:fixed固定定位用法指導(dǎo)
轉(zhuǎn)載源于:http://www.dlmjj.cn/article/dpjjgei.html


咨詢
建站咨詢
