語法:
position:static | relative | absolute | fixed
取值:
static:默認值,無特殊定位,對象遵循正常文檔流。top,right,bottom,left等屬性不會被應用,默認值。 
relative:相對定位,對象遵循正常文檔流,但將依據top,right,bottom,left等屬性在正常文檔流中偏移位置。 
absolute:絕對定位,對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。 
fixed:固定定位,對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現滾動條時,對象不會隨著滾動。 
四個屬性的詳細介紹:
static,默認值
說到這里我們不得不提一下一個定義——文檔流,很多書對文檔流這個概念只是一筆帶過,沒有詳細解答,但我根據自己的經驗和理解對它進行了總結,文檔流其實就是文檔的輸出順序,也就是我們通常看到的由左到右、由上而下的輸出形式,在網頁中每個元素都是按照這個順序進行排序和顯示的,而float和position兩個屬性可以將元素從文檔流脫離出來顯示。
默認值就是讓元素繼續(xù)按照文檔流顯示,不作出任何改變。
relative,相對定位
位置屬性被設置為relative之后,是相對于前面的容器定位的。這個時候不能用top left在定位。應該用margin。它可以隨窗口大小變化。但大小仍然不會變。要是你設置成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,絕對定位
位置被設置為absolute后,被設置的元素會被定義到包含它的元素內的指定坐標(X坐標、Y坐標)。
比如:position:absolute;left:20px;top:80px; 這個容器始終位于距離瀏覽器左20px,距離瀏覽器上80px的這個位置。它不會隨著窗口大小變化,只是固定在一個特定的坐標軸上面;
固定位置,fixed
在理論上,被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標,不論窗口是否滾動,它都會固定在這個位置。但是目前它在IE6中不被支持,只有IE7和Firefox瀏覽器可以識別
新聞熱點
疑難解答