CSS中Position四個屬性的使用介紹
發(fā)布時間:2013-10-16 16:31:45 作者:佚名
我要評論
CSS定位中Position是必不可少的,其有四個屬性static、relative、absolute、fixed,下面為大家詳細介紹下,這個四個屬性的使用場合,感興趣的朋友不要錯過
語法:
position:static | relative | absolute | fixed
取值:
static:默認值,無特殊定位,對象遵循正常文檔流。top,right,bottom,left等屬性不會被應(yīng)用,默認值。
relative:相對定位,對象遵循正常文檔流,但將依據(jù)top,right,bottom,left等屬性在正常文檔流中偏移位置。
absolute:絕對定位,對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
fixed:固定定位,對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現(xiàn)滾動條時,對象不會隨著滾動。
四個屬性的詳細介紹:
static,默認值
說到這里我們不得不提一下一個定義——文檔流,很多書對文檔流這個概念只是一筆帶過,沒有詳細解答,但我根據(jù)自己的經(jīng)驗和理解對它進行了總結(jié),文檔流其實就是文檔的輸出順序,也就是我們通常看到的由左到右、由上而下的輸出形式,在網(wǎng)頁中每個元素都是按照這個順序進行排序和顯示的,而float和position兩個屬性可以將元素從文檔流脫離出來顯示。
默認值就是讓元素繼續(xù)按照文檔流顯示,不作出任何改變。
relative,相對定位
位置屬性被設(shè)置為relative之后,是相對于前面的容器定位的。這個時候不能用top left在定位。應(yīng)該用margin。它可以隨窗口大小變化。但大小仍然不會變。要是你設(shè)置成width:100%;height:100%;這樣就會隨著窗口變大變小。
比如:<div class="1"></div><div class="2"></div>
當1固定了位置。1的樣式 float:left;width:100px; height:800px;
2的樣式為 float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右邊,距離120px.
absolute,絕對定位
位置被設(shè)置為absolute后,被設(shè)置的元素會被定義到包含它的元素內(nèi)的指定坐標(X坐標、Y坐標)。
比如:position:absolute;left:20px;top:80px; 這個容器始終位于距離瀏覽器左20px,距離瀏覽器上80px的這個位置。它不會隨著窗口大小變化,只是固定在一個特定的坐標軸上面;
固定位置,fixed
在理論上,被設(shè)置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標,不論窗口是否滾動,它都會固定在這個位置。但是目前它在IE6中不被支持,只有IE7和Firefox瀏覽器可以識別
position:static | relative | absolute | fixed
取值:
static:默認值,無特殊定位,對象遵循正常文檔流。top,right,bottom,left等屬性不會被應(yīng)用,默認值。
relative:相對定位,對象遵循正常文檔流,但將依據(jù)top,right,bottom,left等屬性在正常文檔流中偏移位置。
absolute:絕對定位,對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
fixed:固定定位,對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現(xiàn)滾動條時,對象不會隨著滾動。
四個屬性的詳細介紹:
static,默認值
說到這里我們不得不提一下一個定義——文檔流,很多書對文檔流這個概念只是一筆帶過,沒有詳細解答,但我根據(jù)自己的經(jīng)驗和理解對它進行了總結(jié),文檔流其實就是文檔的輸出順序,也就是我們通常看到的由左到右、由上而下的輸出形式,在網(wǎng)頁中每個元素都是按照這個順序進行排序和顯示的,而float和position兩個屬性可以將元素從文檔流脫離出來顯示。
默認值就是讓元素繼續(xù)按照文檔流顯示,不作出任何改變。
relative,相對定位
位置屬性被設(shè)置為relative之后,是相對于前面的容器定位的。這個時候不能用top left在定位。應(yīng)該用margin。它可以隨窗口大小變化。但大小仍然不會變。要是你設(shè)置成width:100%;height:100%;這樣就會隨著窗口變大變小。
比如:<div class="1"></div><div class="2"></div>
當1固定了位置。1的樣式 float:left;width:100px; height:800px;
2的樣式為 float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右邊,距離120px.
absolute,絕對定位
位置被設(shè)置為absolute后,被設(shè)置的元素會被定義到包含它的元素內(nèi)的指定坐標(X坐標、Y坐標)。
比如:position:absolute;left:20px;top:80px; 這個容器始終位于距離瀏覽器左20px,距離瀏覽器上80px的這個位置。它不會隨著窗口大小變化,只是固定在一個特定的坐標軸上面;
固定位置,fixed
在理論上,被設(shè)置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標,不論窗口是否滾動,它都會固定在這個位置。但是目前它在IE6中不被支持,只有IE7和Firefox瀏覽器可以識別
相關(guān)文章
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對比,需要的朋友可以參考下2015-11-06
- positon有4個屬性:static relative absolute fixed,我們都知道absolute是絕對定位,relative是相對定位,但是這個絕對與相對是什么意思呢?絕對是什么地方的絕對,相對又2014-11-28
- 對于Position、Float我們在平時使用上可以說是使用頻率非常高的兩個CSS屬性,對于這兩個屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對這兩個屬性使用2014-06-14
- position屬性主要有四種屬性值,任何元素的默認position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute,感興趣的朋友可以了解下2013-12-09
css中關(guān)于定位屬性position為fixed的使用記載
當一個div想要定位時,我們第一反應(yīng)是position屬性,而position屬性除了默認值外,還有absolute,relative和fixed,下面有個不錯的示例,不懂的朋友可以參考下2013-11-11- 定位的話,父DIV設(shè)置position:relative后,子DIV的position:absolute就會相對父DIV作絕對定位,接下來為大家介紹下CSS的position屬性在DIV層中的應(yīng)用2013-10-09
CSS樣式position屬性的一個小實例:z方向三層布局分析
使用CSS樣式中的position屬性實現(xiàn)z方向三層布局效果,本文甚是疑惑,于是乎搜集整理一番,曬出代碼和大家分享一下2012-12-07- CSS position屬性使用說明,需要的朋友可以參考下。2009-11-04
- 網(wǎng)頁制作Webjx文章簡介:position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)2009-04-02
- position有五個屬性: static | relative | absolute | fixed | inherit,也許你看到這個標題覺得很簡單,確實這是一篇關(guān)于CSS中Position屬性基礎(chǔ)知識的文章,但是關(guān)于Pos2015-11-27

