語法:

position：static | relative | absolute | fixed

取值:

static：默認(rèn)值，無特殊定位，對(duì)象遵循正常文檔流。top，right，bottom，left等屬性不會(huì)被應(yīng)用，默認(rèn)值。
relative：相對(duì)定位，對(duì)象遵循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。
absolute：絕對(duì)定位，對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位。而其層疊通過z-index屬性定義。
fixed：固定定位，對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。

四個(gè)屬性的詳細(xì)介紹：

static，默認(rèn)值

說到這里我們不得不提一下一個(gè)定義——文檔流，很多書對(duì)文檔流這個(gè)概念只是一筆帶過，沒有詳細(xì)解答，但我根據(jù)自己的經(jīng)驗(yàn)和理解對(duì)它進(jìn)行了總結(jié)，文檔流其實(shí)就是文檔的輸出順序，也就是我們通?？吹降挠勺蟮接摇⒂缮隙碌妮敵鲂问?，在網(wǎng)頁中每個(gè)元素都是按照這個(gè)順序進(jìn)行排序和顯示的，而float和position兩個(gè)屬性可以將元素從文檔流脫離出來顯示。

默認(rèn)值就是讓元素繼續(xù)按照文檔流顯示，不作出任何改變。

relative，相對(duì)定位

位置屬性被設(shè)置為relative之后，是相對(duì)于前面的容器定位的。這個(gè)時(shí)候不能用top left在定位。應(yīng)該用margin。它可以隨窗口大小變化。但大小仍然不會(huì)變。要是你設(shè)置成width:100%;height:100%;這樣就會(huì)隨著窗口變大變小。

比如：<div class="1"></div><div class="2"></div>

當(dāng)1固定了位置。1的樣式 float:left;width:100px; height:800px;
2的樣式為 float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右邊，距離120px.

absolute，絕對(duì)定位

位置被設(shè)置為absolute后，被設(shè)置的元素會(huì)被定義到包含它的元素內(nèi)的指定坐標(biāo)（X坐標(biāo)、Y坐標(biāo)）。

比如：position：absolute；left:20px;top:80px; 這個(gè)容器始終位于距離瀏覽器左20px,距離瀏覽器上80px的這個(gè)位置。它不會(huì)隨著窗口大小變化，只是固定在一個(gè)特定的坐標(biāo)軸上面；

固定位置，fixed

在理論上，被設(shè)置為fixed的元素會(huì)被定位于瀏覽器窗口的一個(gè)指定坐標(biāo)，不論窗口是否滾動(dòng)，它都會(huì)固定在這個(gè)位置。但是目前它在IE6中不被支持，只有IE7和Firefox瀏覽器可以識(shí)別

最新評(píng)論