這篇文章給大家分享的是有關(guān)CSS中的position屬性有什么用的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
為麻山等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及麻山網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、成都做網(wǎng)站、麻山網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!1、position的absolute(絕對(duì)定位)
在這里position的absolute絕對(duì)定位我們分兩類來(lái)講:
A:給元素定義了position:absolute,其父框架沒(méi)有定義任何position屬性。此時(shí)的絕對(duì)定位就是相對(duì)于頁(yè)面四周最邊緣來(lái)進(jìn)行定位的,位置將依據(jù)瀏覽器左上角的0點(diǎn)開(kāi)始計(jì)算,絕對(duì)定位使元素與文檔流無(wú)關(guān),因此不占據(jù)空間。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。其位置不受父框架的影響,只以頁(yè)面四周邊緣開(kāi)始計(jì)算。代碼如下:
position
position:absolute;
left:100px;
top:200px;
效果如下圖:
B:給元素定義了position:absolute,其父框架定義了position:absolute\position:relative\position:fixed屬性。此時(shí)的絕對(duì)定位就是相對(duì)于父框架最邊緣最邊緣來(lái)進(jìn)行定位的,絕對(duì)定位使元素與文檔流無(wú)關(guān),因此不占據(jù)空間。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。其位置只在父框架內(nèi)做變化,代碼如下:
position
position:absolute;
left:100px;
top:200px;
效果如下圖
所以,如果頁(yè)面元素的定位,想要定義在父元素內(nèi),而不受顯示器分辨率,瀏覽器窗口大小等限制時(shí),建議采用B種方案。
2、position的relative(相對(duì)定位)
如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位,首先它將出現(xiàn)在它所在的位置上。然后通過(guò)設(shè)置垂直或水平位置,讓這個(gè)元素“相對(duì)于”它的原始起點(diǎn)進(jìn)行移動(dòng)。(再一點(diǎn),相對(duì)定位時(shí),無(wú)論是否進(jìn)行移動(dòng),元素仍然占據(jù)原來(lái)的空間。因此,移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框)。
relative的確是相對(duì)于自己來(lái)定位的,父DIV設(shè)置了position:relative 沒(méi)有給出值,它自身是沒(méi)有效果的
但是對(duì)于它的子元素起到了參照作用
3、position的fixed fixed總是以body為定位時(shí)的對(duì)象,總是根據(jù)瀏覽器的窗口來(lái)進(jìn)行元素的定位,通過(guò)"left"、 "top"、 "right"、 "bottom" 屬性進(jìn)行定位。
關(guān)于position用法貌似還有很多,小編語(yǔ)言組織能力不是太好,總結(jié)一下用法:
當(dāng)你需要做一個(gè)有下拉二級(jí)菜單效果時(shí),父元素你需要position:relative,而里面的下拉元素則需要position:absolute。
當(dāng)你需要做一個(gè)頁(yè)面漂浮的廣告,或者做一個(gè)返回頁(yè)面頂端的按鈕是,你需要position:fixed。
通常我們使用position:absolute;position:relative進(jìn)行絕對(duì)定位布局,通過(guò)CSS進(jìn)行定義定位,DIV布局HTML,注意什么地方使用position:relative,什么地方使用position:absolute進(jìn)行定位,同時(shí)不要忘記使用left、right、top、bottom的配合定位具體位置。絕對(duì)定位如果父級(jí)不使用position:relative,而直接使用position:absolute絕對(duì)定位,這個(gè)時(shí)候?qū)?huì)以body標(biāo)簽為父級(jí),使用position:absolute定義對(duì)象無(wú)論位于DIV多少層結(jié)構(gòu),都將會(huì)被拖出以
為父級(jí)(參考級(jí))進(jìn)行絕對(duì)定位。絕對(duì)定位非常好用,但切記不要濫用,什么地方都用,這樣有時(shí)會(huì)懶得計(jì)算距離上、下、左、右間距,同時(shí)可能會(huì)造成CSS代碼臃腫,更加經(jīng)驗(yàn)適當(dāng)使用,用于該使用地方。末了,小編在提醒一句,如果你在你的父DIV里面的子DIV使用了position:absolute屬性定位,而父DIV沒(méi)有做任何定義(父DIV里面已經(jīng)被其他元素填充占據(jù)),還想要子DIV定義起到作用,這個(gè)時(shí)候子DIV你可以不用left、top、right、bottom來(lái)定義,可以使用margin-top、margin-left來(lái)定義,但是此種方法在ie6/7下和ie8/9/10/11、火狐、谷歌下面的位置是不一樣的,針對(duì)ie6/7你需要用到css Hack,代碼如下:
position
position:absolute;
margin-left:100px;
margin-top:200px;
效果如下圖
使用CSS Hack之后 代碼:
position
position:absolute;
margin-left:100px;
margin-top:200px;
在各個(gè)版本的瀏覽器下的 效果如下
此種方法好不要使用 在不同版本瀏覽器下需要來(lái)回的用CSS Hack調(diào)整!
感謝各位的閱讀!關(guān)于“CSS中的position屬性有什么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!